CSS布局与定位常用方法

介绍左右布局，左中右布局，水平居中，垂直居中等常用技巧。

目录

1. CSS布局与定位
   1. 左右布局
   2. 左中右布局
   3. 水平居中
      1. 内联元素方法：
      2. 内联元素方法：
   4. 垂直居中7种方法

CSS布局与定位

本次主要介绍如何使用CSS作出
左右布局
左中右布局
水平居中
垂直居中
等其他小技巧

左右布局

方法：
1.给子元素设置浮动float:left&right，父元素清除浮动clearfix。
作用：清除浮动效果后父元素的塌陷。

.clearfix::after{
  content: '';
  display: block;
  clear: both;
}

代码：

html:

<div class="baba clearfix">
<div class="left"></div>
<div class="right"></div>
</div>

css:

.clearfix::after{
  content: '';
  display: block;
  clear: both;
}

.baba{
  border: 1px solid red;
  width: 300px;;
}

.left{
  width: 50%;
  height: 100px;
  background: #000;
  float: left;
}
.right{
  width: 50%;
  height: 100px;
  background: green;
  float: left;　
}

2.绝对定位

3.inline-block

左中右布局

方法：和左右布局一样，float+clearfix

水平居中

内联元素方法：

父元素身上写text-align:center;

除了文本类型，div类型block属性变成inline-block可以实现同行效果。

内联元素方法：

div类型实现分行效果。

垂直居中7种方法

1.水平垂直居中

2.利用margin:auto来实现居中

3.使用父元素table & 子元素table-cell布局，实现水平和垂直居中

同时可以设置table-cell高度。

4.使用绝对定位，position: absolute;top: 50%;left: 50%; margin-top: -50px; margin-left: -50% (这是在知道该元素的具体高度和宽度)

5.使用绝对定位，不知道具体的高度和宽度。position: absolute;top: 50%;left: 50%;transform：translate(-50%,-50%)

6.使用flex。 在父元素上面设置： display: flex; justify-content: center; align-items: center

7.使用绝对定位，margin。 在子元素上面设置：position: absolute；top:0;bottom: 0;right: 0;left: 0; margin: auto

可以固定div垂直居中。