CSS技巧：轻松实现盒子的水平、垂直及全方位居中对齐
最编程
2024-02-13 08:07:29
...
CSS 实现盒子模型水平居中
水平居中效果图如下：
HTML：
CSS 全局样式：
方法一：使用margin: 0 auto;（只适用于子盒子有宽的时候）
方法二：text-align + display（子盒子有或没有宽度的时候都适用）
方法三：position 定位（只适用于子盒子有宽度和高度的时候）
方法四：position + transform（子盒子有或没有宽高的时候都适用）
方法五：flex 布局（弹性布局）（子盒子有或没有宽高的时候都适用）
CSS 实现盒子模型垂直居中
垂直居中效果图如下
HTML 和 CSS全局样式同上。
方法一：position 定位（适用于子盒子有宽度和高度的时候）
方法二：position + transform（子盒子有或没有宽高的时候都适用）
方法三：flex 布局（子盒子有或没有宽高的时候都适用）
CSS 实现盒子模型水平垂直居中
水平垂直居中效果图如下
HTML 和 CSS全局样式同上
方法一：position 定位（适用于子盒子有宽度和高度的时候）
方法二：position + transform（子盒子有或没有宽高的时候都适用）
方法三：flex 布局（子盒子有或没有宽高的时候都适用）
上一篇： 让盒子在网页*的三种方法
下一篇： 几种将文字居中显示在盒子中的方法