【面试前】css样式垂直/水平/垂直水平居中的方式总结

qzmjef

所有样式设置之前，Body元素可能会自带一个margin属性，必须将其覆盖掉。否则有些办法运用时可能会引起窗口边缘显现滚动条。

因此起始之前必须：

水平居中

1. 父元素设置text-align:center,子元素为行内元素或设置为行内元素，此时照片和文字都是居中表示的。

2. 当照片居中，照片下面的说明文字在居中位置并且必须左对齐表示的话，设置包裹的容器宽度为照片的宽度，并margin: 0 auto; 此方式针对块级元素和行内元素都适用。

3. 子元素宽已知px。相针对父元素定位，left偏移50%，左外边距设为自己宽高的负一半，必须设置父元素宽度。

4. transform

5. flex

垂直居中

1. 父元素display: table-cell;vertical-align: middle;子元素会垂直居中于父元素，必须确定父元素的高度。

缺点：margin属性失效，由于margin不适用于表格布局；

tabel-cell的元素宽高设置为百分比时没效果，倘若必须宽度100%，将container宽度设置为极重的一个值；

当container必须设置为absolute的时候table-cell失效，由于absolute强制把非flex元素设置为block，处理办法是在外面再套一层容器进行absolute

2. 子元素高已知px。相针对父元素定位，top偏移50%，上外边距设为自己宽高的负一半，注意父元素必须设置height

3. transform

4. flex

水平垂直居中

1. 子元素宽高已知px。相针对父元素定位，top和left偏移50%，左外边距和上外边距各设为自己宽高的负一半；

缺点：确定的体积，没法自适应。

2. transform：将左外边距和上外边距负值修改为transform: translate(-50%,-50%),此时拥有自适应的效果。原理：translate里的百分比是按照元素自己宽高计算的。

3. 子元素相针对父元素绝对定位，四周为0，并且margin值为auto

4. 父元素display: table-cell;vertical-align: middle;text-align:center子元素是行内元素

5. display: flex;justify-content: center;align-items: center;缺点：不兼容IE浏览器。

b1gc8v

回顾历史，我们感慨万千；放眼未来，我们信心百倍。