css垂直居中
在css中水平居中很好实现,但是垂直居中某些情况就会有一定的难度,这篇随笔对垂直居中的几种情况作了总结
一、单行内容的居中
只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-height 和 height,并使两值相等,再加上 over-flow: hidden 就可以了
demo1:
.demo-1{
height: 4em;
line-height: 4em;
overflow: hidden;
}
overflow: hidden;作用:保证布局的完整性
二、多行内容居中,且容器高度可变
也很简单,给出一致的 padding-bottom 和 padding-top 就行
demo2:
.demo-2{
padding-top: 24px;
padding-bottom: 24px;
}
三、多行内容居中,且容器高度固定
把容器当作表格单元,CSS 提供一系列diplay属性值,包括 display: table, display: table-row, display: table-cell 等,能把元素当作表格单元来显示。这是再加上 vertical-align: middle, 就和表格中的 valign="center" 一样了。
demo3:
.demo-3{
display: table-cell;
height: 300px;
vertical-align: middle;
}
可惜IE不支持这些属性,不过在其他浏览器上显示效果非常完美。
要注意的是:和一个合法的<td>元素必须在<table>里一样,display: table-cell 元素必须作为 display: table 的元素的子孙出现。
对于IE中的问题可以用一下方法解决
.demo-4{
height: 300px;
position: relative;
}
.middle-demo-4 div{
position: absolute;
top: 50%;
left: 0;
}
.middle-demo-4 div div{
position: relative;
top: -50%;
left: 0;
}
整合三和四,写出支持所有浏览器的垂直居中容器!
demo5: