关于html:HTML居中代码怎么写

25次阅读

共计 1179 个字符，预计需要花费 3 分钟才能阅读完成。

`<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>