HTML5+CSS3学习笔记（十）页面布局的五种居中方式

HTML5+CSS3学习笔记（十）

本系列更多文章，可以查看专栏 HTML+CSS学习笔记

---

---

(1) 盒子模型

/*居中元素设置样式*/
margin:0 auto;

原理： 利用盒子模型的等式：外边距 + 可见区域宽度 = 包含块宽度
缺点：

• ①无法解决垂直居中的问题
• ② 居中的元素必须指定宽度

(2) 定位 “父相子绝”，父元素/包含块设置相对定位，居中的元素设置绝对定位

/*父元素设置样式*/
postion:relative;

/*居中元素设置样式*/
postion:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;

原理： 利用定位后的等式实现居中，偏移量+ 外边距 + 可见区域的宽度/高度 = 包含块的宽度/高度
缺点：

• ① 设置的属性较多
• ② 居中的元素必须指定宽度和高度

(3) 利用表格布局

/*父元素设置样式，达到垂直居中*/
display:table-cell;
/* 易写成center！！！*/
vertical-align:middle;

/*居中元素设置样式，达到水平居中方法1*/
margin:0 auto;
/*居中元素设置样式，达到水平居中方法2*/
display:inline-block;
text-align:center;

原理： 利用html表格特性，快速实现垂直居中
缺点： 父元素设置单元格后，默认宽度由单元格内容撑开，自动宽度丢失

(4) 利用弹性布局

/*居中元素设置样式*/
display:flex;
/*设置主轴方向对齐方式*/
justify-content:center;
/*设置侧轴方向对齐方式*/
align-items:center;

(5) 利用网格布局

/*居中容器设置样式*/
display:grid;
/*设置水平方向对齐方式*/
justify-items:center;
/*设置垂直方向对齐方式*/
align-items:center;

---

结尾

如有错误，欢迎评论区指正。