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

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

 

 

 

你可能感兴趣的:(行内元素和块元素垂直水平居中)