html居中代码怎么写？

<div>居中 - 法1通过中心点，计算坐标来垂直居中。<html><head><style type="text/css">.content {background-color: rgb(87, 87, 92);position: absolute;/* 水平居中 */left: 50%;wid

Learn-anything

57934人浏览 · 2021-11-16 07:48:57

Learn-anything · 2021-11-16 07:48:57 发布

`<div>`居中 - 法1

通过中心点，计算坐标来垂直居中。

<html>

<head>
    <style type="text/css">
        .content {
            background-color: rgb(87, 87, 92);
            position: absolute;
            /* 水平居中 */
            left: 50%;
            width: 30%;
            margin-left: -15%;
            /* 垂直居中 */
            top: 50%;
            height: 30%;
            margin-top: -15%;
        }
    </style>
</head>

<body>
    <div class="content">Content goes here</div>
</body>

</html>

`<div>`居中 - 法2

<html>

<head>
    <style type="text/css">
        #content {
            position: absolute;
            /* 垂直居中 */
            top: 0;
            bottom: 0;
            height: 50%;
            /* 水平居中 */
            left: 0;
            right: 0;
            width: 70%;
            margin: auto;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="content"> Content here</div>
</body>

</html>

垂直居中：vertical-align

设置单行或表格单元格内元素，垂直方向上的位置，不能用块级元素。可用属性值：top middle bottom 等，详细说明.

<html>

<head>
    <style type="text/css">
        .middle {
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div>
        An
        <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32"
            height="32" />
        image with a middle alignment.
    </div>
</body>

</html>

文字居中：`line-height`

将文字line-height等于父容器的高度，即可垂直方向上居中；text-align可让文在水平方向上居中。

<html>
<head>
    <style type="text/css">
        #wrapper {
            height: 100px;
            background-color: red;
        }

        .content {
            /* 文字垂直居中 */
            line-height: 100px;
            /* 文字水平居中 */
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <p class="content">Content goes here</p>
    </div>
</body>

</html>