垂直水平居中的方式

最新推荐文章于 2022-06-01 00:00:36 发布

xuxu_qkz

最新推荐文章于 2022-06-01 00:00:36 发布

阅读量227

点赞数

分类专栏： html+css 文章标签： html+css

本文链接：https://blog.csdn.net/xuxu_qkz/article/details/78341595

版权

html+css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

垂直水平居中的方式

垂直水平居中的方式列举出了四种方式：

方式一：利用属性拉扯的方式

<style type="text/css">

    body,html{
        background-color: #000000;
    }
    #box{
        width: 400px;
        height: 300px;
        background-color: #FFFFFF;

        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;

        margin: auto;
    }
</style>
<body>
    <div id="box"></div>
</body>

方式二：利用百分比

 #box{
            width: 400px;
            height: 300px;
            background-color: #fff;

            position: absolute;
            left: 50%;
            margin-left: -200px;
            top: 50%;
            margin-top: -150px;
        }

方式三：利用伸缩盒子

<style type="text/css">
        html,body{
            height: 100%;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #box{
            width: 400px;
            height: 300px;
            background-color: #ccc;
        }
    </style>

方式四：利用伪元素，可以理解为span

<style type="text/css">
            html,body{
                background-color: #000;
                height: 100%;
                text-align: center;/*水平居中*/
            }
            body:after{
                content: ''; 
                height: 100%;
                display: inline-block;
                vertical-align: middle; 
            }
            #box {

               vertical-align: middle;/*垂直居中*/  
               display: inline-block;

               background-color: #fff;
               width: 400px;
               height: 300px;
            }
        </style>