一：水平&&垂直居中:

1：內(nèi)聯(lián)元素

display:inline/inline-block。不獨(dú)占一行扳还，同行顯示才避，直到右邊邊距為止換行。
常見元素：span/img/input/button/label等氨距。
實(shí)現(xiàn)要點(diǎn)：text-align: center;設(shè)置水平居中桑逝；設(shè)置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>內(nèi)聯(lián)元素水平垂直居中</span>
 </div> 

2：塊狀元素:

display:block/table俏让。默認(rèn)獨(dú)占一行楞遏。常見元素：div/h1/h2……/p/table/ul/ol等茬暇。
實(shí)例2.1：
實(shí)現(xiàn)要點(diǎn)：
1：定位left: 50%;top: 50%;設(shè)置元素初始位置在水平方向一半與垂直方向一半的交叉點(diǎn)處:
2：margin-left: -150px; margin-top: -30px;設(shè)置元素自身偏移位置為對(duì)應(yīng)元素寬度/高度的一半。
弊端： 必須知道元素寬度和高度

       #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>       

二：等寬度自適應(yīng)

元素寬度隨著父級(jí)容器寬度，自動(dòng)計(jì)算蟋定。
實(shí)例1：
適用場(chǎng)景：列表排列粉臊，列數(shù)為偶數(shù)最佳驶兜，方便計(jì)算寬度百分比扼仲。
實(shí)現(xiàn)要點(diǎn)：使用百分比設(shè)置元素寬度屠凶，如需設(shè)置水平外邊距時(shí)，使用百分比肆资，其數(shù)值應(yīng)該加上元素寬度郑原。（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

實(shí)例2：
適用場(chǎng)景： 列表排列，列數(shù)為偶數(shù)最佳犯犁，方便計(jì)算寬度百分比属愤。
實(shí)現(xiàn)要點(diǎn)： 使用百分比設(shè)置元素寬度，如需設(shè)置水平外邊距時(shí)酸役，不用計(jì)算其百分比值住诸。

        #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