1.左右布局
使用float实现
对左部分区域设置float:left，右部分区域设置float:right。
使用flex布局
对父元素设置display: flex，然后通过设置justify-content属性，来确定子元素在水平方向上的展现形式。
2.左中右布局
和左右布局一样，可采用上述两种方式来实现
3.水平居中
行内元素，在其父级元素上设置
text-align: center;确定宽度的块级元素
margin: 0 auto;-
对于未知宽度的块级元素
1.对目标元素设置display：inline-block，再对其父级元素设置text-align:center。
2.flex实现.parent{ display: flex; flex-direction: column; } .targetEle{ align-self:center; }
4.垂直居中
-
table-cell实现
.parent{ display: table-cell; vertical-align: middle; text-align: center; } flex实现
1.给父元素设置display:flex；align-items:center；
2.给父元素设置display:flex；flex-direction:column；justify-content:center；
3.给父元素设置display:flex；子元素设置margin:auto 0；
5.实用小技巧之水平垂直居中（干货满满）
- 给父元素设置display:flex；justify-content:center；align-items:center；
- 给父元素设置display:flex；给子元素设置margin:auto；
