Skip to main content

div嵌套标签水平垂直居中方法

左边固定右边自适应布局Demo 查看这里

总结当前知道的对div嵌套标签水平垂直居中方法，如果还有新的方法，请不吝赐教哦。好，下面开始列举代码咯。 首先给需要实现水平垂直居中的两个div设置统一的样式

.styl {
    width: 100%;
    height: 300px;
    background: #ccc;
    margin: 30px auto;
    position: relative;
    border: 1px solid #000;
}
.box {
    width: 200px;
    height: 100px;
    background: #333;
}

方法一：父标签 table-cell 法​

看题目就知道是利用父标签的 display: table-cell,该属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的。 那么既然父标签已经是类似表格单元了，那么就可以利用表格单元的属性vertical-align: middle; 来使得内部元素垂直居中了，然后再给子标签 margin:0 auto; 即可，需要说明的是，这里的父标签需要设置宽度，不能自适应宽度

/*css*/
.styl1 {
    width: 1000px;
    display: table-cell;
    vertical-align: middle;
}
.styl1 .box {
    margin: 0 auto;
}

html代码只要用我们上面的样式即可，之后的class名只要修改 styl1 为对应的样式名即可。

/* html */
<div class="styl styl1">
    <div class="box"></div>
</div>

方法二：常规 position 及子元素偏移方法​

父标签设置 position:relative,子标签设置 position:absolute,同时设置 left:50%,top:50%,这个时候子标签的左上角已经垂直水平居中，再设置margin的负值为子元素宽高的50%即可将中心点对齐。 此方法缺点，需要动态调整 margin 偏移量为子标签宽高度的一半这个值，无法自动匹配。

.styl2 .box {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -100px;
}

方法三：CSS3新属性 transform 的 translate 方法​

首先 transform 是css3的新属性，该属性是让我们对元素进行旋转、缩放、移动或倾斜。那么再看属性值 translate 是定义2D转换，就是平面的x,y喽。知道这些，那么我们在 方法二的基础上将偏移量通过 transform 来设置即可。 此属性支持IE9以上属性，而且需要兼容不同浏览器写法。

.styl3 .box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%)
}

方法四：margin:auto 方法​

此方法依然是在方法二的基础上修改，将子元素的left、top、right、bottom都设置为0，然后再 margin:auto,即可实现子元素的水平垂直居中。 此方法好处是自适应父标签的宽高，也就是说，无论父标签宽高怎么变都水平垂直居中哦。 此方法支持IE8+以及其他浏览器。是不是很神奇，具体原因查看 margin:auto实现绝对定位元素的水平垂直居中

.styl4 .box {
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

方法五：flex 布局方法​

flex意为弹性布局，不同于盒模型布局，子元素实现垂直居中就比较容易了，具体教程可以参看 阮一峰的flex布局教程，这里只说怎么实现。 在此我们只要将父标签设置为 display: flex,并进行相应的主轴 justify-content: center 和交叉轴上的 align-items: center 对齐方式就可以了。

.styl5 {
    justify-content: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
}

html结构同上

<div class="styl styl5">
    <div class="box"></div>
</div>

方法六：伪元素 inline-block/vertical-align 方法​

这个方法主要利用父标签的 ::before 伪元素的 inline-block vertical-align来实现，比较巧妙，但这个方法要求子元素的属性必须是 display: inline-block, 好处依然是父子元素都可以自适应宽高并保持水平垂直居中。css如下：

.styl6 {
    text-align: center;
}
.styl6:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.styl6 .box {
    display: inline-block;
    vertical-align: middle;
}

好，至此总结了div内部元素水平垂直居中的方法。

代码如下:

<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Div不固定高度水平垂直居中的6种方法</title>
    <style>
        body {
            padding: 20px 40px;
            background: url(http://og8z552x2.bkt.clouddn.com/grid.png);
        }

        div {
            opacity: 0.8;
        }

        .styl {
            width: 100%;
            height: 300px;
            background: #ccc;
            margin: 30px auto;
            position: relative;
            border: 1px solid #000;
        }

        .box {
            width: 200px;
            height: 100px;
            background: #333;
        }

        .styl1 {
            width: 1000px;
            display: table-cell;
            vertical-align: middle;
        }

        .styl1 .box {
            margin: 0 auto;
        }

        .styl2 .box {
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -50px 0 0 -100px;
        }

        .styl3 .box {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
        }

        .styl4 .box {
            position: absolute;
            margin: auto;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
        }

        .styl5 {
            justify-content: center;
            align-items: center;
            display: -webkit-flex;
            display: flex;
        }

        .styl6 {
            text-align: center;
        }

        .styl6:before {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }

        .styl6 .box {
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <h1>方法一：父标签 table-cell 法</h1>
    <div class="styl styl1">
        <div class="box"></div>
    </div>

    <h1>方法二：常规 position 及子元素偏移方法</h1>
    <div class="styl styl2">
        <div class="box"></div>
    </div>

<h1>方法三：CSS3新属性 transform 的 translate 方法</h1>
    <div class="styl styl3">
        <div class="box"></div>
    </div>

<h1>方法四：margin:auto 方法</h1>
    <div class="styl styl4">
        <div class="box"></div>
    </div>

<h1>方法五：flex 布局方法</h1>
    <div class="styl styl5">
        <div class="box"></div>
    </div>

<h1>方法六：伪元素 inline-block/vertical-align 方法</h1>
    <div class="styl styl6">
        <div class="box"></div>
    </div>

</body>

</html>