css 中虽然有 vertical-align 属性,但是这个属性并非是对布局设置垂直居中用的;

这里,记录一下自己常用的布局垂直居中的方法:

设置 display: table-cell

表格单元格的内容默认是垂直居中显示的;所以,我们也可以将一个 div 模拟成一个 td,这样再设置内容垂直居中就行了;不过 IE7以下浏览器不支持 display: table-cell

HTML:

<div class="box">
    <div class="con">con</div>
</div>

CSS:

.box {
    width: 100px;
    height: 100px;
    display: table-cell;
    vertical-align: middle;
    background-color: #03c6a8;
}
.con {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    background-color: #0a727d;
}

显示效果:

div

定位

定位,主要是设置子元素的 left 和 top 相对于父元素 50%,然后再用 margin-left 和 margin-top 设置其值为子元素宽度的一半;

HTML:

<div class="box02">
    <div class="con02">con</div>
</div>

CSS:

.box02 {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: #03c6a8;
}
.con02 {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -25px;
    margin-top: -25px;
    background-color: #0a727d;
}

显示效果:

div

使用 vertical-align: middle

vertical-align,不能运用于块元素,所以,如果要让 div 使这个属性,首先得设置 div 的 display: inline-block;行内元素如果要有宽、高也得先具有块元素的特性;

HTML:

<div class="box03">
    <span class="con03">con03</span><span class="con03-span"></span>/* 两span间不要换行 */
</div>

CSS:

.box03 {
    width: 100px;
    height: 100px;
    text-align: center;
    background-color: #03c6a8;
}
.con03 {
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
}
.con03-span {
    width: 1px;
    height: 100%;
    margin-right: -1px;
    display: inline-block;
    vertical-align: middle;
}

显示效果:

div