Question

为什么 CSS 3 要实现垂直居中那么的难

Answer 1

CSS3实现居中其实也没那么难，有如下几种方法可以实现：
1 使用绝对定位
top:50% margin-top:-height/2
2 使用display中的table和table-cell，如：
#cross2 {
height: 100%;
width: 100%;
display: table; /*让元素以表格形式渲染*/
}

#cross2 .table-cell {
display: table-cell; /*让元素以表格的单元素格形式渲染*/
vertical-align: middle; /*使用元素的垂直对齐*/
text-align: center;
}
3 使用float，如
#cross3 #floater {
float: left;
height: 50%; /*相对于父元素高度的50%*/
margin-bottom: -50px; /*值大小为居中元素高度的一半（100px/2）*/
}