• 目录

水平垂直居中

阅读量: 173 编辑

水平垂直居中

文字水平居中，text-align属性

  • text-align:center;

文字垂直居中

  • height和line-height配合使用，有相同的值就可以了

  • height: 500px; line-height: 500px;

代码实战

代码的详细解读，可以参考视频教程。

新建 html 文件 08-center.html ，编写下方程序，运行看看效果吧

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>文字居中</title>

        <style type="text/css">
            .my-div{
                width: 200px;
                height: 200px;
                line-height: 200px;
                background-color: red;

                text-align: center;
            }
        </style>
    </head>
    
    <body>
        <div class="my-div">我是文字
        </div>
    </body>

</html>
  • 目录