元素居中大总结

一：普通元素水平居中

1：文字居中 text-align:center

2：父级使用text-align:center(图片是行内快元素  inline-block)

3：块级元素水平居中    margin:0 auto

二：普通元素垂直居中

1:确定高度的单行文本垂直居中  line-height=height

2:不确定高度的一段文本垂直居中

方法一:::padding-top和padding-bottom设置相同的值

方法二:::display:inline-block和vertical-align:middle

3:确定高度的块级元素垂直居中  外层元素相对定位  里层元素绝对定位 top:50%  margin-top:自身高度一半的负值

三：普通元素垂直水平居中

1:定位法-- 外层元素相对定位 里层元素绝对定位 里层元素一定要设置top: 0  right: 0;  bottom: 0; left: 0; margin: auto缺一不可

2:平移法--  自身元素相对定位 top,left:50% transform:translate(-50%,-50%)

3:当不确定子元素的宽高时 子元素垂直水平居中 --外层元素相对定位 内层元素绝对定位 四个方向定位值设置相同

4:弹性盒子实现水平垂直居中(对于高度确定 文本行数不确定的情况)  display: flex;

justify-content: center;

align-items: center;

四：浮动元素居中

内外层元素同时设定浮动 相对定位外层元素设置left:50%  内层元素right:50%