CSS布局小结

2018-09-14 本文已影响0人 Keller7

使用float实现

对左部分区域设置float:left，右部分区域设置float:right。

使用flex布局

对父元素设置display: flex，然后通过设置justify-content属性，来确定子元素在水平方向上的展现形式。

行内元素，在其父级元素上设置
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;
}
```

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；