从一个居中方案，来看CSS的布局。
一、水平居中
1.行内元素的水平居中
text-align:center;
2.块状元素的水平居中
- 设置宽度，margin:atuo;
- 子元素设置为inline-block，父元素增加text-align:center;
- 父元素设置display:flex;和justify-content:center;
- 绝对定位配合margin负值
二、垂直居中
1.display:inline-block;时，height和line-height设置为父元素高度
2.display:table-cell;和vertical-align:middle;
3.已知高度，绝对定位配合margin负值
4.未知高度，绝对定位配合CSS3的transform:translateY(50%)
5.父元素display:flex;和align-items:center;
6.父元素display:flex;然后子元素marigin:auto;
7.table元素中的td元素增加vertical-align:top;和text-align:center;
8.绝对定位，四个方向设置为0，配合margin:auto;
9.利用浮动，父元素浮动配合relative到中间，子元素利用relative进行偏移
10.利用font-size，父元素设置font-size为为高度除以1.14的值，子元素恢复font-size配合vertical-align:middle;
11.已知高度，利用calc进行计算设置padding
三、总结
从居中的方案，布局的很多思路也大同小异。
这些知识点包含弹性盒子（flex），行盒（inline、inline-block），表格（table、table-cell），绝对定位（absolute），相对定位（relative），浮动（float），CSS3的2D转换（transform）计算属性（calc），字体（font-size）。
提炼为大的知识点，包含盒模型（box-model），定位体系（position），CSS的属性（attribute）。
来源：https://www.cnblogs.com/bearRunning/p/12216883.html