1.左右布局

方法：1向左浮動(dòng)，2向右浮動(dòng)
效果圖:

左右布局.png

HTML

<div class="lefeAndRight clearfix">
    <div class="div1"></div>
    <div class="div2"></div>
  </div>

CSS

.clearfix::after{
  content:"";
  display: block;
  clear: both;
}
.lefeAndRight{
  border:2px solid black;
  height:200px;
  width:400px;
}
.div1{
  float:left;
  width:190px;
  height:190px;
  background: #95E5F7;
  margin:5px 5px;
}
.div2{
  float:right;
  width:190px;
  height:190px;
  background: #999892;
  margin:5px 5px;
}

2.左中右布局

方法：flex布局
效果圖：

左中右布局.png

HTML

<div class="box">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

CSS

body{
  margin:0;
  padding:0;
}
.box{
  width:100%;
  height:200px;
  display:flex;
}
.left{
  height:100%;
  flex:1;
  background-color:blue;
}
.middle{
  height:100%;
  flex:2;
  background-color:yellow;
}
.right{
  height:100%;
  flex:1;
  background-color:blue;
}

3.水平居中

方法： margin:0 auto;
效果圖:

水平居中.png

HTML

<div class="box"></div>

CSS

.box{
  width:100px;
  height:100px;
  background-color:red;
  margin:0 auto;
}

4.垂直居中：

方法：先水平居中，再設(shè)置position:relative;之后就可以設(shè)置偏移位置了
效果圖：

垂直居中.png

HTML

<div class="box"></div>

CSS

body{
  width:100%;
  height:500px;
  margin:0;
  padding:0;
  border:1px solid red;
}
.box{
  width:100px;
  height:100px;
  background-color:red;
  margin:0 auto;
  position:relative;
  top:50%;
  margin-top:-50px;
}