1)行内元素居中
1>给行内元素的父元素设置
text-align:center;//行内元素水平垂直
height:20px
line-height:20px;//行内元素垂直居中
原理:line-height和font-size的计算之差分为两半,分别加在文本行内的顶部和底部,实现居中
2>父元素设置display:table,行内元素设置display:table-cell; vertical-align:center;
2)块元素居中
1>水平居中
margin:0 auto(设置在要水平居中的元素上)
2>绝对定位和0:已知宽高,不兼容IE6,IE7,元素可以使用百分比
margin:auto;
position:absolute;top:0;right:0bottom:0;left:0;
3>固定定位和0
margin:auto;
position:fixed;top:0;right:0;bottom:0;left:0;
4>绝对定位和负边距:已知元素的宽高,兼容IE7,IE8
position:absolute;top:50%;left:50%;
margin-left:-(width+padding)/2px;
margin-top:-(height+padding)/2px;
5>固定定位和负边距
position:fixed;top:50%;left:50%;
margin-left:-(width+padding)/2px;
margin-top:-(height+padding)/2px;
6>translate:元素大小不固定,因为transform是相对于自身元素的尺寸而言的。但是IE9之前不支持
position:absolute;top:50%;left:50%;
-webkit-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
7>disply:flex
display:flex ;align-items:center; justify-content:center;
8>display:flex和margin:auto子元素高度未知仍然可以使用
.contain{ display:flex; text-align:center;}
.center{ margin:auto;}