一. 垂直居中
寫頁面的時候，尤其像提示信息類，為了更好的視覺體驗，要求是垂直居中。列出以下三種實現方式：
第一種：居中的部分絕對定位並平移本身寬高的各一半
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:after {
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;
}
提示：在上述的內容中，有些兼容的部分沒有一一列出。