首页手记 CSS垂直居中的6种方式，最快只需2行代码

CSS垂直居中的6种方式，最快只需2行代码

标签：

CSS3

本文给出了6种利用CSS使HTML元素垂直居中与父元素的方法，其中包括：

1、2 绝对定位的方式

3 基于属性计算的方式（只需要2行代码哦）

4 利用vertical-align属性

5 盒子模型方式

6 基于内联元素特性

需要说一下下面的代码的打开方式，当启用一种方法时，请打开一种方法的注释，然后把其它方法注释掉，比如我想使用第2中最简单的方式，最终结果为：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS垂直居中</title>
        <style>
            .wrapper{
                width: 500px;
                height: 500px;
                background-color: #666;
                /*方式三 基于属性计算*/
                overflow: hidden;
            }

            .box{
                width: 100px;
                height: 100px;
                background-color: red;
                /*方式三*/
                margin: calc(50% - 50px) auto;
            }
        </style>
    </head>
    <body>
    <div class="wrapper">
        <div class="box"></div>
    </div>
    </body>
    </html>

好了，6种方法对应的总代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS垂直居中</title>
    <style>
        .wrapper{
            width: 500px;
            height: 500px;
            background-color: #666;
            /*方式一，方式二 绝对定位的方式*/
            /*position: relative;*/
            /*方式三 基于属性计算*/
            /*overflow: hidden;*/
            /*方式四: 基于vertical-align属性*/
            /*text-align: center;*/
            /*方式五: 使用弹性盒子*/
            /*display: flex;*/
            /*justify-content: center;*/
            /*align-items: center;*/
            /*方式六 基于块级内联元素的特性*/
            /*line-height: 550px; !*.wrapper.height+1/2*box.height*!*/
            /*text-align: center;*/
        }

        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            /*方式一*/
            /*position: absolute;*/
            /*left:0;*/
            /*right: 0;*/
            /*top:0;*/
            /*bottom:0;*/
            /*margin: auto;*/
            /*方式二*/
            /*position: absolute;*/
            /*left: 50%;*/
            /*top: 50%;*/
            /*margin-left: -50px; !*1/2的width*!*/
            /*margin-top: -50px; !*1/2的height*!*/
            /*方式三*/
            /*margin: calc(50% - 50px) auto;*/
            /*方式四*/
            /*display: inline-block;*/
            /*vertical-align: middle;*/
            /*margin: 0 auto;*/
            /*方式六*/
            /*display: inline-block;*/
        }

        /*方式四的辅助元素*/
        /*.help{*/
            /*width: 0;*/
            /*height: 100%;*/
            /*display: inline-block;*/
            /*vertical-align: middle;*/
        /*}*/
    </style>
</head>
<body>
<div class="wrapper">
    <div class="box"></div>
    <!--方式四-->
    <!--<div class="help"></div>-->
</div>
</body>
</html>

点击查看更多内容