CSS布局小结

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；
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容