未知宽高的元素水平垂直居中

在学习CSS布局的过程中经常会碰到需要将元素垂直水平居中的情况,
通常的做法是通过设置一定的外边距,或者通过定位和负外边距来完成,


例如:
一,设置外边距









二,居中定位








方法二:使用表格;在这里可以直接使用table标签,或者可以将父盒子转换成表格单元格,需要居中的元素转换为行内块元素,单元格内可以通过vertical-align属性和text-align属性将元素垂直水平居中.(或者也可以不将元素转换成行内块元素,直接将元素的外边距设置为(0,auto)来水平居中).
这种方式的优点是兼容性强,但是需要添加较多的层级,使结构变得复杂;








你可能感兴趣的:(未知宽高的元素水平垂直居中)