css居中方法

水平居中：
(1) 文本、圖片等行內元素的水平居中

　　給父元素設置text-align:center能夠實現文本、圖片等行內元素的水平居中。

(2) 肯定寬度的塊級元素的水平居中

　　經過設置margin-left:auto;和margin-right:auto;來實現的。

(3) 不肯定寬度的塊級元素的水平居中
方法一:

將須要居中的部分包含在table標籤內，對table設置margin-left:auto;和margin-right:auto;就可使table水平居中，間接使須要居中的部分水平居中。

方法二：

　　改變塊級元素display爲inline類型，而後使用text-align:center來實現居中。
方法三(左偏移量根據父元素和子元素的寬度比能夠肯定):

　　經過給父元素設置float，而後父元素設置position:relative和left:50%，子元素設置position:relative和left:-50%來實現水平居中。

垂直居中

　　(1) 父元素高度不肯定的文本、圖片、塊級元素的垂直居中

　　經過給父容器設置相同上下邊距實現的，即設置padding-top和padding-bottom。

　　(2)父元素高度肯定的單行文本的垂直居中

　　經過給父元素設置line-height來實現，line-height值和父元素高度值相同。

　　(3)父元素高度肯定的多行文本、圖片、塊級元素的垂直居中
CSS中有一個用於垂直居中的屬性vertical-align，但只有當父元素爲td或者th時，這個屬性才生效，對於其餘塊級元素，如div,p等，默認狀況下是不支持vertical-align屬性的。在firefox和ie8下，能夠設置塊級元素的display:table-cell來激活vertical-align屬性，但ie6和ie7並不支持display:table-cell。

方法一：

　　直接使用table，由於td標籤默認下就隱式設置了vertical-align:middle。

方法二：

　　對支持display:table-cell的ie8和firefox用display:table-cell和vertical-align:middle來實現居中，添加至須要垂直居中的元素的父級元素，對不支持display:table-cell的ie6和ie7，使用特定格式的hack。

 

使用css3將一個div水平和垂直居中顯示

方案一：

div絕對定位水平垂直居中【margin:auto實現絕對定位元素的居中】，

代碼兩個關鍵點：1.上下左右均0位置定位；

　　　　　　　　2.margin: auto; 其width、height如何更改都是居中顯示的，兼容性能夠,IE7及以前版本不支持

複製代碼
1 .div1{
2
3 width: 100px;
4 height: 100px;
5 border: 4px solid red;
6 position: absolute;
7
8 text-align: center;
9
10 left:0;
11 right:0;
12 top: 0;
13 bottom: 0;
14 margin: auto;
15 /*50%爲自身尺寸的一半*/
16 }
複製代碼
效果以下：

優勢：

1.支持跨瀏覽器，包括IE8-IE10.

2.無需其餘特殊標記，CSS代碼量少

3.支持百分比%屬性值和min-/max-屬性

4.只用這一個類可實現任何內容塊居中

5.不管是否設置padding均可居中（在不使用box-sizing屬性的前提下）

6.內容塊能夠被重繪。

7.完美支持圖片居中。

缺點：

1.必須聲明高度（查看可變高度Variable Height）。

2.建議設置overflow:auto來防止內容越界溢出。（查看溢出Overflow）。

3.在Windows Phone設備上不起做用。

瀏覽器兼容性：

Chrome,Firefox, Safari, Mobile Safari, IE8-10.

絕對定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均測試經過。

 

方案二：

div絕對定位水平垂直居中【margin 負間距】

此方案代碼關鍵點：1.必需知道該div的寬度和高度，

　　　　　 2.而後設置位置爲絕對位置，

　　　　　　　　 3.距離頁面窗口左邊框和上邊框的距離設置爲50%，這個50%就是指頁面窗口的寬度和高度的50%，

　　　　　　　　　4.最後將該div分別左移和上移，左移和上移的大小就是該DIV寬度和高度的一半。

複製代碼
1 .div1{
2
3 width: 100px;
4 height: 100px;
5 border: 4px solid red;
6 position: absolute;
7
8 text-align: center;
9
10 left:50%;
11 top: 50%;
12 margin: -50px 0 0 -50px;
13 /*50%爲自身尺寸的一半*/
14 }
複製代碼
亦可寫成：

複製代碼
1 .div1{
2
3 width: 100px;
4 height: 100px;
5 background-color: green;
6 position: absolute;
7
8 text-align: center;
9
10 left:50%;
11 top: 50%;
12 margin-left: -50px; /* width/2 */
13 margin-top: -50px; /* height /2 */
14
15 }
複製代碼

效果以下：

這或許是當前最流行的使用方法。

測試代表，這是惟一在IE6-IE7上也表現良好的方法。

優勢：

1. 良好的跨瀏覽器特性，兼容IE6-IE7。

2. 代碼量少。

缺點：

1. 不能自適應。不支持百分比尺寸和min-/max-屬性設置。

2. 內容可能溢出容器。

3. 邊距大小與padding,和是否認義box-sizing: border-box有關，計算須要根據不一樣狀況。

 

方案三：

div絕對定位水平垂直居中【Transforms 變形】

這是最簡單的方法，不近能實現絕對居中一樣的效果，也支持聯合可變高度方式使用。內容塊定義transform: translate(-50%,-50%) 必須加上

top: 50%; left: 50%;

複製代碼
1 .div1{
2
3 width: 200px;
4 height: 200px;
5 background-color: pink;
6 position: absolute;
7
8 text-align: center;
9
10 left:50%;
11 top: 50%;
12
13 /*-webkit-transform: translate(-50%,-50%);*/
14 /*-ms-transform: translate(-50%,-50%);*/
15 transform: translate(-50%,-50%);
16
17 }
複製代碼
效果以下：

優勢：

1. 內容可變高度

2. 代碼量少

缺點：

1. IE8不支持

2. 屬性須要寫瀏覽器廠商前綴

3. 可能干擾其餘transform效果

4. 某些情形下會出現文本或元素邊界渲染模糊的現象

 

若只是水平（方向）居中：

複製代碼
1 .div1{
2
3 width: 100px;
4 height: 100px;
5 border: 4px solid red;
6
7 text-align: center;
8
9 margin: 0 auto;
10 /*50%爲自身尺寸的一半*/
11 }
複製代碼
效果以下：

css3不定寬高水平垂直居中

 

只要三句話就能夠實現不定寬高水平垂直居中。

 

1 justify-content:center;//子元素水平居中
2 align-items:center;//子元素垂直居中
3 display:-webkit-flex;

在父級元素上面加上上面3句話，就能夠實現子元素水平垂直居中。