CSS

1. 左右布局
   html

<div class="container1">
      <div class="leftbox1">左列</div>
      <div class="rightbox1">右列</div>
</div>

css

.leftbox1 {
  width: 50%;
  height: 300px;
  background-color: #ddaace;
  float: left;
}     
.rightbox1 {
  width: 50%;
  height: 300px;
  background-color: #8A6BBE;
  float: right;
}

2. 左中右布局
   html

<div class="container2">
  <div class="leftbox2">左侧列</div>
  <div class="midbox2">中间列</div>
  <div class="rightbox2">右侧列</div>
</div>

css

.leftbox2 {
  height: 300px;
  width: 30%;
  float: left;
  background-color: #B28FCE;
}
.midbox2 {
  height: 300px;
  width: 40%;      
  float: left;
  background-color: #986DB2;
}
.rightbox2 {
  height: 300px;
  width: 30%;
  float: right;
  background-color: #77428D;
}

3. 水平居中

text-align: center;

或者 通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。

4. 垂直居中
   我们把包含文字元素的容器行高设置为大于字体大小并且等于元素的高度。

line-height: 300px；

效果如下图：

image.png