一. 垂直居中
写页面的时候，尤其像提示信息类，为了更好的视觉体验，要求是垂直居中。列出以下三种实现方式：
第一种：居中的部分绝对定位并平移本身宽高的各一半
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
注意:由于仅仅absolute的定位会引起脱离文档流，如果居中部分的父元素不是占满整个可视区域，不要忘记对父元素做相对定位或绝对定位的处理（即position:relative;或者position:absolute;）。
第二种：采用弹性布局与外边距的方式
父元素：
display: flex;
子元素：
margin: auto;
第三种：采用弹性布局的方式， 并设置父元素的主轴 与交叉轴均为居中
父元素：
display: flex;
justify-content: center;
align-items: center;
二. 比border更细的线
在一些页面的分界线，使用border设置即便设宽度为1px，仍显得粗。解决方法如下：
.element:before {
content:"";
width:200%;//由于整体缩为原来的一半，宽度采用原先的2倍
height:200px;
position:absolute;
top:0;
left:0;
border-bottom:1px solid #666;
box-sizing:border-box;
-webkit-transform:scale(0.5);
-webkit-transform-origin:0 0;
transform:scale(0.5);
transform-origin:0 0;
}
注意：结合父元素的是否完全占据整个页面，设置父元素的定位。
三. 浮动清除
在设置元素float:left;或者float:right;时会引起元素脱离文档流。可采用以下四种方式来解决：
第一种：为父元素设置高度，需要知道设置成浮动的子元素 的高度。
第二种：父元素设置溢出隐藏，overflow:hidden;
第三种：在设置浮动的元素新添加同级，并设置clear:both;
第四种：为浮动元素的父元素添加伪元素(:after)
.parent:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.parent{
zoom:1;
}
提示：在上述的内容中，有些兼容的部分没有一一列出。
CSS之垂直居中、比border更细的线、浮动清除
原文地址：http://www.cnblogs.com/feiyuO/p/7691895.html