CSS实现盒子模型水平居中

 

　　水平居中效果图如下：

 

　　HTML：

 

　　CSS全局样式：

 

　　方法一：使用margin:0auto;（只适用于子盒子有宽的时候）

 

　　方法二：text-align+display（子盒子有或没有宽度的时候都适用）

 

　　方法三：position定位（只适用于子盒子有宽度和高度的时候）

 

　　方法四：position+transform（子盒子有或没有宽高的时候都适用）

 

　　方法五：flex布局（弹性布局）（子盒子有或没有宽高的时候都适用）

 

　　CSS实现盒子模型垂直居中

 

　　垂直居中效果图如下

 

　　HTML和CSS全局样式同上。

 

　　方法一：position定位（适用于子盒子有宽度和高度的时候）

 

　　方法二：position+transform（子盒子有或没有宽高的时候都适用）

 

　　方法三：flex布局（子盒子有或没有宽高的时候都适用）

 

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

 

　　水平垂直居中效果图如下

 

　　HTML和CSS全局样式同上

 

　　方法一：position定位（适用于子盒子有宽度和高度的时候）

 

　　方法二：position+transform（子盒子有或没有宽高的时候都适用）

 

　　方法三：flex布局（子盒子有或没有宽高的时候都适用