行内元素和块元素垂直水平居中

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