CSS 元素垂直居中

1.对于固定宽高的元素居中

<h3>固定宽高居中</h3>

<div class="wrapper">
    <div class="content">
        <span>content</span>
    </div>
</div>

/**
    固定宽高div居中
*/
.wrapper {
    width: 200px;
    height: 200px;
    border: 1px solid #cccccc;
    margin: 10px auto;
    position: relative;
    box-shadow: -5px 0 20px #999, 5px 0 20px #999, 0 -5px 5px #999, 0 5px 5px #999;
}


.content {
    width: 100px;
    height: 50px;
    border: 1px solid #cccccc;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -25px;
    text-align: center;
}
.content span {
    display: block;
    line-height: 50px;
}

如图带阴影的外层容器是一个div,内层有一个小的div,小div内部有一个span元素。对于这种父容器与子容器的宽高都是确定的布局，可以将父容器设置为相对定位，子容器设为绝对定位。然后将子容器分别向下向左浮动父容器的50%。但这时会使子容器的上边框和左边框分别居于父容器的垂直方向的中间和水平方向的中间，所以我们需要将子容器分别再向左偏移子容器宽度的一半，向上偏移子容器高度的一半。这样子容器就刚好位于父容器的中间了。

上图中示例中我们看到内容为content的span元素也位于其父元素的中间，对于这种单行行内元素有一个小技巧可以使其在父元素的垂直方向上居中，即设置其行高等于父级容器。这种垂直居中只对单行行内元素有效，一般我们可以用这种方式让一个连接式按钮的文本垂直居中，这种方式就很方便。

2.父容器和子元素宽高不定

一些情况下，容器和父元素的宽高均是不确定的，这时采用第一种方法就无法实现居中效果了。可以采用下面的方式实现居中效果。为父容器添加伪选择器:before,并将子元素的display属性设为inline-block。来看具体的样式和布局文件。

/*父容器*/
.second-wrapper {
    width: 300px;
    height: 300px;
    margin: 10px auto;
    border: 1px solid #cccccc;
    position: relative;
    text-align: center;
    box-shadow: 5px 5px 5px #999;
}
/*为父容器添加的伪选择器*/
.second-wrapper:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}

/*子元素*/
.second-content {
    padding: 50px;
    border: 1px solid #cccccc;
    display: inline-block;
    vertical-align: middle;
    width: 50%;
}

<h3>宽高不定，但元素必须是inline-block</h3>

<div class="second-wrapper">
    <div class="second-content">
        <p>
            内部元素
        </p>
    </div>
</div>

实现效果

这里可以将父元素的宽高设置为任何值，子元素的宽高也可以为任何值，都可以将其居中显示。

3.宽高 利用display为table的属性使元素居中

/*利用display的table属性，将父容器dispaly属性设置为table,子元素的display属性设置为table-cell
然后使用vertical-align，text-align分别是元素垂直水平居中*/
.third-wrapper {
    width: 300px;
    height: 300px;
    margin: 10px auto;
    border: 1px solid #cccccc;
    position: relative;
    text-align: center;
    box-shadow: 5px 5px 5px #999;
    display: table;
}

.third-content {
    display: table-cell;
    vertical-align: middle;
}

<h3>宽高不定，利用table属性</h3>
<div class="third-wrapper">
    <div class="third-content">
        hello world
    </div>
</div>