用css2和css3分别写一下垂直居中和水平居中

最新推荐文章于 2023-04-20 19:23:56 发布

千玺小迷妹

最新推荐文章于 2023-04-20 19:23:56 发布

阅读量156

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/Evan_Ji/article/details/121905388

版权

水平居中

CSS2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .container{
                height: 300px;
                width: 500px;
                background-color: blue;
            }
            .content1{
                width: 10rem;
                margin: 0 auto;
                background-color: brown;

            }
            
        </style>
    </head>
    <body>
        <div class="container">
            <div class="content1">
                    使用margin： 0 auto 居中
            </div>

        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .container{
                height: 300px;
                width: 500px;
                background-color: rgb(22, 206, 135);
                text-align: center;
            }
            .content1{
                width: 10rem;
                background-color: brown;

                display: inline-block;

            }
            
        </style>
    </head>
    <body>
        <div class="container">
            <div class="content1">
                使用text-align:center 居中
            </div>

        </div>
    </body>
</html>

css3

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .container{
                height: 300px;
                width: 500px;
                background-color: rgb(22, 206, 135);
                display: flex;
                justify-content: center;
            }
            .content1{
                width: 10rem;
                height: 10rem;
                background-color: brown;
                
            }
            
        </style>
    </head>
    <body>
        <div class="container">
            <div class="content1">
                使用flex居中
            </div>

        </div>
    </body>
</html>

垂直居中

css2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .container{
                height: 300px;
                width: 500px;
                background-color: rgb(22, 206, 135);
                display: table-cell;
                vertical-align: middle;
               
            }
            .content1{
                width: 100px;
                height: 100px;
                background-color: brown;
                display: inline-block;
                vertical-align: middle;
            }
            
        </style>
    </head>
    <body>
        <div class="container">
            <div class="content1">
                使用flex居中
            </div>
        </div>
    </body>
</html>

css3

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .container{
                height: 300px;
                width: 500px;
                background-color: rgb(22, 206, 135);
                display: flex;
                align-items: center;
               
            }
            .content1{
                width: 100px;
                height: 100px;
                background-color: brown;
                
           
            }
            
        </style>
    </head>
    <body>
        <div class="container">
            <div class="content1">
                使用flex居中
            </div>
        </div>
    </body>
</html>

除了flex以外的垂直水平居中的技巧都是属于css2的

千玺小迷妹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用css2和css3分别写一下垂直居中和水平居中

水平居中CSS2<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ height: 300px; width: 500px;
复制链接

扫一扫