css解決方案經驗雜記

文本垂直居中

單行文本：line-height的值等於height；

多行文本：padding上下值一致便可；

還可使用position：absolute進行絕對定位，若是是相對父級元素，則須要設置position:relative。

top:50%;
left:50%;
margin-left:元素寬度/2;
margin-top:元素高度/2;

水平居中-行內元素

.父元素{text-align: center;}

水平居中-定寬塊狀元素

.塊狀元素{margin:0 auto;}

水平居中-不定寬塊狀元素

方法一：元素外面添加<table>標籤（包括<tr><td>），對<table>設置"margin：0 auto;"

方法二：塊狀元素設置成"display:inline"或者"display:inline-block"，再對其父元素設置"text-align: center;"

方法三：

.父元素{
　　float: left;
　　position: relative;
　　left: 50%;
}
.子元素{
　　position: relative;
　　left: -50%;
}

垂直居中-父元素高度肯定的單行文本

line-hight 和 hight 高度一致

垂直居中-父元素高度肯定的多行文本

方法一：元素外面添加<table>標籤，同時設置"vercial-align:middle;"

方法二：塊狀元素設置"display: table-cell"，同時設置"varcial-align: middle;" 兼容性：IE8+

解決行內元素間隙bug

父元素使用 font-size:0;

清除浮動的三種方法

1.添加新元素

.clear{clear: both; height: 0; line-height: 0; font-size: 0}

2.父元素添加overflow

.over-flow{overflow: auto; zoom: 1; /* zoom: 1; 是在處理兼容性問題 */}

3.父元素添加僞類:after

.outer :after {clear: both; content:'.'; display: block; width: 0; height: 0; visibility: hidden;}