• 前端佈局非常重要的一環就是頁面框架的搭建，也是最基礎的一環。在頁面框架搭建之中，又有居中佈局/多列布局/全域性佈局。今天介紹一下居中佈局的一些技巧。

居中佈局

水平居中

1.使用inline-block + text-align：

• 原理：先將子框由塊級元素改變為行內塊元素，再通過設定行內塊元素居中以達到水平居中的目的。#####
• 用法：對子框設定display:inline-block,對父框設定text-align:center。
• 示例：

1
2
3
4
5
6
7
8
9

<div class='parent'>
	<div class='child'>DEMO</div>
 

</div>
.child {
	display: inline-block;
}
.parent {
	text-align: center;
}

• 優點:相容性好。
• 缺點:.child裡的文字也會水平居中。(可以在.child裡新增text-align:left還原)

2.使用table + margin

• 原理:先將子框設定為塊級表格來顯示,再設定子框居中以達到居中水平.
• 用法:對子框設定display:table,再設定margin:0 auto;
• 示例:

1
2
3
4
5
6
7

<div class='parent'>
	<div class='child'>DEMO</div>
 

</div>
.child {
	display: table;
	margin: 0 auto;
}

• 優點:只設置了child,IE8以上都支援;
• 缺點:不支援IE6/IE7,將div換成了table;

3.使用absolute + transform

• 原理:將子框設定為絕對定位,移動子框,使子框左側距離相對框左側邊框的距離為相對框寬度的一半,再通過向左移動子框的一半寬度以達到水平居中。父框需要設定為相對定位(或者絕對定位),使父框成為子框的相對框。
• 用法:對父框設定position:relative(absolute);對子框設定position:absolute;left:50%;transform:translateX(-50%);
• 示例:

1
2
3
4
5
6
7
8
9
10
11

<div class='parent'>
	<div class='child'>DEMO</div>
</div>
.parent {
	position: relative;
}
.child {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

• 優點:居中元素不會對其它元素產生影響;
• 缺點:transform屬於CSS3內容,相容性存在一定問題;

4.使用flex + margin

• 原理:通過CSS3中的佈局利器flex將子框轉換為flex item,再設定子框居中以達到居中目的。
• 用法:先將父框設定為display:flex;再設定子框margin:0 auto;
• 示例:

1
2
3
4
5
6
7
8
9

<div class='parent'>
	<div class='child'>DEMO</div>
</div>
.parent {
	display:flex;
}
.child {
	margin:0 auto;
}

• 缺點:IE6/7/8等低版本瀏覽器不支援;

5.使用flex + justify-content

• 原理:通過CSS3中的佈局利器flex中的justify-content屬性來達到居中目的;
• 用法:先將父框設定為display:flex;再設定justify-content:center;
• 示例:

1
2
3
4
5
6
7

<div class='parent'>
	<div class='child'>DEMO</div>
</div>
.parent {
	display:flex;
	justify-content: center;
}

• 優點:只設置parent即可;
• 缺點:IE6/7/8等低版本瀏覽器不支援;

垂直居中

1.使用table-cell + vertical-align

• 原理:通過將父框轉化為一個表格單元格顯示,在通過設定屬性,使表格單元格內容垂直居中;
• 用法:先將父框設定為display:table-cell;再設定vertical-align:middle;
• 例項:

1
2
3
4
5
6
7

<div class='parent'>
	<div class='child'>DEMO</div>
</div>
.parent {
	display:table-cell;
	vertical-align: middle;
}

• 優點: 相容性較好,IE8以上都支援;
• 缺點: 將div元素轉化為了table元素;

2.使用absolute + transform

• 原理:類似於上面說過的水平居中的原理，將子框設定為絕對定位，移動子框，使子框上邊距離相對框上邊邊框的距離為相對框高度的一半，再通過向上移動子框的高度的一半以達到垂直居中;父框需設定為相對定位或者絕對定位，使其成為子框的相對框；
• 用法:先將父框設定為position:relative(absolute);再設定子框position:absolute;top:50%;transform:translateY(-50%);
• 例項:

1
2
3
4
5
6
7
8
9
10
11

<div class='parent'>
	<div class='child'>DEMO</div>
</div>
.parent {
	position:relative;
}
.child {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

• 優點: 居中元素不會對其它元素產生影響;
• 缺點: transform屬於CSS3內容,相容性存在一定問題;

３.使用flex + align-items

• 原理:通過CSS3中的佈局利器flex中的align-items屬性來達到居中目的;
• 用法:先將父框設定為display:flex;再設定align-items:center;
• 示例:

1
2
3
4
5
6
7

<div class='parent'>
	<div class='child'>DEMO</div>
</div>
.parent {
	display:flex;
	align-items: center;
}

• 優點:只設置parent即可;
• 缺點:IE6/7/8等低版本瀏覽器不支援;

水平 + 垂直　居中

####　1.使用absolute + transform

• 原理:將水平居中和垂直居中相結合;
• 用法:先將父框設定為position:relative(absolute);再設定子框position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
• 例項:

1
2
3
4
5
6
7
8
9
10
11
12

<div class='parent'>
	<div class='child'>DEMO</div>
</div>
.parent {
	position:relative;
}
.child {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

• 優點: 居中元素不會對其它元素產生影響;
• 缺點: transform屬於CSS3內容,相容性存在一定問題;

2.使用inline-block + text-align + table-cell + vertical-align

• 原理:使用inline-block+text-align水平居中;再用table-cell+vertical-align垂直居中;將二者結合起來;
• 例項:

1
2
3
4
5
6
7
8
9
10
11

<div class='parent'>
	<div class='child'>DEMO</div>
</div>
.parent {
	text-align:center;
	display:table-cell;
	vertical-align:middle;
}
.child {
	display: inline-block;
}

• 優點: 相容性較好;
• 缺點: 使用起來比較麻煩;

2.使用flex + justify-content + align-items

• 原理:通過設定flex中的justify-content和align-items,從而達到水平垂直居中;
• 例項:

1
2
3
4
5
6
7
8

<div class='parent'>
	<div class='child'>DEMO</div>
</div>
.parent {
	display:flex;
	justify-content:center;
	align-items:center;
}

• 優點: 只設置parent元素;
• 缺點: 相容性存在一些問題;