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;} 

转载于:https://www.cnblogs.com/newgold/p/4826789.html