CSS垂直居中总结
2017-09-23 本文已影响0人
饥人谷_Jack
-
使块级元素里面的文本水平居中，在此块级元素添加text-align: center;即可实现。
image.png
-
使块级元素里面的内联元素水平居中，在此块级元素上添加text-align: center;即可实现。
image.png
-
使块级元素里面的块级元素水平居中，在子元素上添加margin: 0 auto;即可实现。(此种情况，子元素的块级元素必须设置固定的宽度,如果没有固定宽度，块级元素占据正行宽度，就没有水平居中这个说法了)
image.png
-
使块级元素里面的多行块级元素文本垂直居中，在父元素上添加padding即可实现。
image.png
-
使块级元素里面的单行文本垂直居中，在此块级元素添加line-height的高度等于此块级元素的高度即可即可实现。
image.png
- 使一个弹窗垂直水平居中，可以使用该绝对定位实现。
image.png
- 使一个块级元素内的一个行内元素垂直居中，可以使用vertical-align实现。
image.png
- 使一个块级元素内的一个行内元素垂直居中，可以使用table-cell实现垂直居中。
image.png
