CSS居中及佈局

CSS中的居中可分爲水平居中和垂直居中。水平居中分爲行內元素居中和塊狀元素居中兩種情況，而塊狀元素又分爲定寬塊狀元素居中和不定寬塊狀元素居中。下面詳細介紹這幾種情況。

水平居中

使用inline-block和text-aligh實現

.parent{text-align: center;} .child{display: inline-block;}

優點：兼容性好；缺點：需要同時設置子元素和父元素

使用margin:0 auto 來實現

.child{width:200px;margin:0 auto;}

缺點：需要指定寬度

使用table實現

.child{display:table;margin:0 auto;}

優點：只需要對自身進行設置；

使用絕對定位實現

.parent{position:relative;} /*或者實用margin-left的負值爲盒子寬度的一半也可以實現，不過這樣就必須知道盒子的寬度，但兼容性好*/ .child{position:absolute;left:50%;transform:translate(-50%);}

缺點：兼容性差

使用flex佈局實現

/*第一種方法*/ .parent{display:flex;justify-content:center;} /*第二種方法*/ .parent{display:flex;} .child{margin:0 auto;}

缺點：兼容性差，大面積佈局可能會影響效率

垂直居中

在使用vertical-align的時候，由於對齊的基線是用行高的基線作爲標記，故需要設置line-height或設置display:table-cell;

/*第一種方法*/ .parent{display:table-cell;vertical-align:middle;height:20px;} /*第二種方法*/ .parent{display:inline;vertical-align:middle;}

vertical-align應用於行內元素和表單元素
使用絕對定位

.parent{position:relative;} .child{positon:absolute;top:50%;transform:translate(0,-50%);}

使用flex實現

.parent{display:flex;align-items:center;}

水平垂直全部居中

均需設置寬、高
利用vertical-align,text-align,inline-block實現

.parent{display:table-cell;vertical-align:middle;text-align:center;} .child{display:inline-block;}

.parent{position:relative;} .child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

.parent{display:flex;justify-content:center;align-items:center;}

多列布局

左列定寬，右列自適應

利用float+margin實現

.content{height: 200px;border: 1px dotted black;overflow: hidden;}
.left{border: 1px solid green;width:200px;height: 200px;float: left;}
.right{border: 1px solid red;margin-left:300px;height: 200px;}
//需要注意的是，左列設置左浮動，右列不設置浮動，通過margin來實現與左列的距離。

利用float+margin(fix)實現

    <div class="content">
        <div class="left"></div>
        <div class="rightBox">
            <div class="right"></div>
        </div>
    </div>
    //不理解爲什麼添加一個父級元素並設置她的width 100%，並設置一個負margin會有用。
 .content{height: 200px;border: 1px dotted black;overflow: hidden;}
.left{border: 1px solid green;width: 200px;height: 200px;float: left;}
.rightBox{width: 100%;margin-left: -300px;
float: right;border: 3px solid maroon;}
.right{border: 1px solid red;margin-left:300px;height: 200px;}

使用float+overflow實現

.content{height: 200px;border: 1px dotted black;
            overflow: hidden;}
.left{border: 1px solid green;width: 200px;height: 200px;float: left;}
.right{border: 1px solid red;overflow:hidden;margin-left:300px;height: 200px;}//這裏設置右邊自適應部分是overflow：hidden，默認的情況右邊自動填充餘下的部分，如果想讓左右兩邊有間隔的話，需要設置margin-left：300；需要加上左邊的部分和間隔的部分。

overflow:hidden，觸發bfc模式，浮動無法影響，隔離其他元素，IE6不支持，左側left設置margin-left當作left與right之間的邊距，右側利用overflow:hidden 進行形成bfc模式
如果我們需要將兩列設置爲等高，可以用下述方法將“背景”設置爲等高，其實並不是內容的等高

.content{overflow: hidden;height: 200px;}
.left{border: 1px solid green;width: 100px;float: left;}
.right{border: 1px solid red;overflow: hidden;}
.left,.right{height:200px;padding-bottom: 9999px;margin-bottom: -9999px;}

使用table實現

.content{display:table;table-layout:fixed;height:200px;width:100%;border: 1px solid green;}
.left{border: 1px solid red;width: 100px;height: 200px;}
.left,.right{display: table-cell;border: 2px solid black;height: 200px;}

使用flex實現

.content{display:flex;height:200px;width:100%;border: 1px solid green;}
.left{border: 1px solid red;width: 100px;height: 200px;}
.right{border: 2px solid black;height: 200px;flex: 1;}

兩列定寬，一列自適應

.content{display:flex;height:200px;width:100%;border: 1px solid green;}
.left1,.left2{border: 1px solid red;width: 100px;height: 200px;}
.right{border: 2px solid black;height: 200px;margin-left: 400px;}

方法與上面差不多

兩列定寬，中間自適應