欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法

程序员文章站 2022-03-07 10:20:18
CSS 实现盒子模型水平居中 水平居中效果图如下: HTML: CSS 全局样式: 方法一:使用margin: 0 auto;(只适用于子盒子有宽的时候) 方法二:text-align + display(子盒子有或没有宽度的时候都适用) 方法三:position 定位(只适用于子盒子有宽度和高度的 ......

 css 实现盒子模型水平居中

水平居中效果图如下:

CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法

html:

CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法

css 全局样式:

CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法

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

CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法

方法二:text-align + display(子盒子有或没有宽度的时候都适用)

CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法

方法三:position 定位(只适用于子盒子有宽度和高度的时候)

CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法

方法四:position + transform(子盒子有或没有宽高的时候都适用)

CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法

方法五:flex 布局(弹性布局)(子盒子有或没有宽高的时候都适用)

CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法

css 实现盒子模型垂直居中

 垂直居中效果图如下

CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法

html 和 css全局样式同上。

方法一:position 定位(适用于子盒子有宽度和高度的时候)

CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法

方法二:position + transform(子盒子有或没有宽高的时候都适用)

 CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法

 方法三:flex 布局(子盒子有或没有宽高的时候都适用)

CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法

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

水平垂直居中效果图如下

CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法

html 和 css全局样式同上

方法一:position 定位(适用于子盒子有宽度和高度的时候)

CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法

方法二:position + transform(子盒子有或没有宽高的时候都适用)

CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法

方法三:flex 布局(子盒子有或没有宽高的时候都适用)

CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法