html中怎么让盒子模型居中,CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法-站长资讯中心...

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 布局(子盒子有或没有宽高的时候都适用)

原文链接:https://www.cnblogs.com/plsmile/p/11119728.html

如有疑问请与原作者联系

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com

特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有