CSS布局入门

从一个居中方案，来看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）。