-
左右布局
1.1 float + margin
1.2 绝对定位
-
左中右布局
1.1 float + margin
1.2 绝对定位
![2920775-5c42df33ae3f2264.png](https://upload-images.jianshu.io/upload_images/2920775-5c42df33ae3f2264.png)
1.3 display table
![2920775-21f9d3203372d89f.png](https://upload-images.jianshu.io/upload_images/2920775-21f9d3203372d89f.png)
- 水平居中
3.1 行内元素水平居中
在父级元素上添加
text-align: center;
![2920775-c0fa5c7313bc6fad.png](https://upload-images.jianshu.io/upload_images/2920775-c0fa5c7313bc6fad.png)
3.2 block元素水平居中
margin: auto;
![2920775-6a545668411d8020.png](https://upload-images.jianshu.io/upload_images/2920775-6a545668411d8020.png)
- 垂直居中
4.1 行内元素水平居中
通过display: table
和vertical-align: middle
实现
CSS 的属性
vertical-align
用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。
4.2 block元素水平居中
![2920775-f9b146da6c9cd715.png](https://upload-images.jianshu.io/upload_images/2920775-f9b146da6c9cd715.png)