如何使用CSS做出：

1. 左中右布局
2. 水平居中
3. 垂直居中

左中右布局

利用flex实现左中右布局,左右定宽,中间自适应

HTML

  <div class="container">
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
  </div>

CSS

.container { display: flex;}
.left { width: 70px;}
.main { flex: 1;}
.right { width: 70px;}

效果

水平居中

HTML

  <div class="container">
    <div class="main">main</div>
  </div>

水平居中最常用的是定宽元素自动左右外边距

main{
    margin-left: auto; 
    margin-right: auto;
}

利用inline-block和父元素配合居中

.container{text-align: center;}
.main{display:inline-block;}

垂直居中

HTML

  <div class="container">
    <div class="main">main</div>
  </div>

如果是行内元素利用line-height垂直居中

.container{
    height:100px;
}
.main{
    display:inline;
    line-height:100px;
}

利用flex垂直居中

.container{    
    display: flex;
    align-items:Center;
}