一：水平&&垂直居中:

1：内联元素

display:inline/inline-block。不独占一行，同行显示，直到右边边距为止换行。
常见元素：span/img/input/button/label等。
实现要点：text-align: center;设置水平居中；设置line-height等于所在容器高度。（ line-height: 200px;height: 200px; ）

 #container {
            width: 600px;
            height: 200px;
            background-color: cadetblue;
            text-align: center;
            line-height: 200px;
        }
 <div id="container">
      <span>内联元素水平垂直居中</span>
 </div> 

2：块状元素:

display:block/table。默认独占一行。常见元素：div/h1/h2……/p/table/ul/ol等。
实例2.1：
实现要点：
1：定位left: 50%;top: 50%;设置元素初始位置在水平方向一半与垂直方向一半的交叉点处:
2：margin-left: -150px; margin-top: -30px;设置元素自身偏移位置为对应元素宽度/高度的一半。
弊端： 必须知道元素宽度和高度

       #box {
            width: 500px;
            height: 200px;
            background-color: cadetblue;
            position: relative;
        }
        #item {
            position: absolute;
           width: 200px;
            height: 80px;
            background-color: cornsilk;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -40px;
        }
    <div id="box">
        <div id="item">已知元素的宽度和高度</span>
    </div>       

2-1.png

       #box {
            width: 500px;
            height: 200px;
            background-color: cadetblue;
            position: relative;
        }
        #item {
            position: absolute;
            width: 200px;
            height: 80px;
            background-color: cornsilk;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
     <div id="box">
        <div id="item">子元素的宽度和高度未知。使用css3 transform: translate控制偏移
     </div>       

trans.png

       #box {
            width: 500px;
            height: 200px;
            background-color: cadetblue;
            position: relative;
        }
        #item {
            position: absolute;
            width: 200px;
            height: 80px;
            background-color: cornsilk;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;           
        }
     <div id="box">
        <div id="item">1：元素宽度/高度未知 2：未使用CSS3属性，浏览器兼容性更佳 </div>
    </div>       

二：等宽度自适应

元素宽度随着父级容器宽度，自动计算。
实例1：
适用场景：列表排列，列数为偶数最佳，方便计算宽度百分比。
实现要点：使用百分比设置元素宽度，如需设置水平外边距时，使用百分比，其数值应该加上元素宽度。（23%+21%）4 = 100%。

       #box1 {                    
            height: 140px;
            background-color: cadetblue;
        }
        .item {           
            width: 23%;
            height: 80px;
            background-color: cornsilk;
            float: left;
            margin: 10px 1%;
            border: 2px solid #ccc;
            box-sizing: border-box;           
        }
   <div id="box1">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>      
    </div>

item.png

实例2：
适用场景： 列表排列，列数为偶数最佳，方便计算宽度百分比。
实现要点： 使用百分比设置元素宽度，如需设置水平外边距时，不用计算其百分比值。

        #box2{
            background-color: darkcyan;
            display: flex;           
        }
        .list{
            width: 25%;
            height: 80px;
            background-color: cornsilk;          
            margin: 20px;
            border: 2px solid #ccc;
           
        }
    <div id="box2">
        <div class="list">1</div>
        <div class="list">2</div>
        <div class="list">3</div>
        <div class="list">4</div>      
    </div>

list.png