html盒子模型 居中,CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法...

CSS实现盒子模型水平居中的方法

水平居中效果图

水平居中

全局样式.parent { color: #FFFFFF; height: 200px; width: 200px; margin: 0 auto; background-color: #000000;}.child { width: 50px; height: 50px; background-color: #26f12d;}

第一种：margin+width

这种方法适用于已经知道width的盒子，实现起来比较简单

第二种：text-align+inline-block

这种方法适用于多种场景(width不固定)

第三种：float+position

这种方法适用于多种场景(width不固定)

第四种：

这种方法适用于多种场景(width不固定)

第五种：flex

这种方法适用于多种场景(width不固定)

第六种：fit-content

这种方法适用于多种场景(width不固定)

CSS实现盒子模型垂直居中的方法

垂直居中效果图

垂直居中

第一种：position

这种方法适用于已经知道width的盒子

第二种：position+transform

这种方法适用于已经知道width的盒子

第三种：flex布局

这种方法适用于多种场景(width不固定)

第四种：table-cell布局

这种方法适用于多种场景(width不固定)

CSS实现盒子模型水平垂直居中方法

水平垂直居中效果图

水平垂直居中

第一种：

第二种：

第三种：