實現CSS樣式垂直水平徹底居中

一、水平居中

 

a、內聯元素（inline or inline-*）居中?

 

你可讓他相對父級塊級元素居中對齊

1 .center-children {
2   text-align: center;
3 }

 

b、塊級元素（block level）居中?

 

你能夠經過設置margin-left和margin-right爲auto讓它居中（同時還要設置width，不然它就會承滿整個容器，沒法看出居中效果），如。

1 .center-me {
2   margin: 0 auto;
3 }

 

c、若是有不少塊級元素呢？

 

若是你有很勻塊級元素須要水平居中成一行，你最好使用一個不一樣的display類型。這是一個使用inline-block和flex的例子同時使用float:left,right。

 

在線示例： http://jsfiddle.net/ourjs/0b6b7wt8/

 1 <main class="inline-block-center">
 2   <div>
 3     I'm an element that is block-like with my siblings and we're centered in a row.
 4   </div>
 5   <div>
 6     I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
 7   </div>
 8   <div>
 9     I'm an element that is block-like with my siblings and we're centered in a row.
10   </div>
11 </main>
12 <main class="flex-center">
13   <div>
14     I'm an element that is block-like with my siblings and we're centered in a row.
15   </div>
16   <div>
17     I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
18   </div>
19   <div>
20     I'm an element that is block-like with my siblings and we're centered in a row.
21   </div>
22 </main>
23  
24 
25 body {
26   background: #f06d06;
27   font-size: 80%;
28 }
29 main {
30   background: white;
31   margin: 20px 0;
32   padding: 10px;
33 }
34 main div {
35   background: black;
36   color: white;
37   padding: 15px;
38   max-width: 125px;
39   margin: 5px;
40 }
41 .inline-block-center {
42   text-align: center;
43 }
44 .inline-block-center div {
45   display: inline-block;
46   text-align: left;
47 }
48 .flex-center {
49   display: flex;
50   justify-content: center;
51 }

 

 

二、垂直居中

 

垂直居中在CSS中有點棘手

 

內聯元素（inline or inline-*）居中，像文本和連接那樣的？

 

a、它是一行的嗎？

 

有時侯元素能夠表現像垂直居中，只是由於它們有相等的上下padding

1 .link {
2   padding-top: 30px;
3   padding-bottom: 30px;
4 }

 

若是padding由於某些緣由不能用，並且文本不會換行的狀況下，你可使用line-height，讓其與height相等去對齊文本。

1 .center-text-trick {
2   height: 100px;
3   line-height: 100px;
4   white-space: nowrap;
5 }

 

b、它是多行的？

 

上下等padding的方式也可讓多行居中，可是若是這方法沒用，你可讓這些文字的容器按table cell模式顯示，而後設置文字的vertical-align屬性對齊，就像talbe那樣

 

在線演示： http://jsfiddle.net/ourjs/0fn2u4rc/

 1 <table>
 2   <tr>
 3     <td>
 4       I'm vertically centered multiple lines of text in a real table cell.
 5     </td>
 6   </tr>
 7 </table>
 8 <div class="center-table">
 9   <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
10 </div>
11 body {
12   background: #f06d06;
13   font-size: 80%;
14 }
15 table {
16   background: white;
17   width: 240px;
18   border-collapse: separate;
19   margin: 20px;
20   height: 250px;
21 }
22 table td {
23   background: black;
24   color: white;
25   padding: 20px;
26   border: 10px solid white;
27   /* default is vertical-align: middle; */
28 }
29 .center-table {
30   display: table;
31   height: 250px;
32   background: white;
33   width: 240px;
34   margin: 20px;
35 }
36 .center-table p {
37   display: table-cell;
38   margin: 0;
39   background: black;
40   color: white;
41   padding: 20px;
42   border: 10px solid white;
43   vertical-align: middle;
44 }

 

c、塊級元素（block level）垂直居中?

 

（1）你知道元素的高度嗎？

 

出於不少方面的緣由，不知道網頁佈局的高度是至關廣泛的。

 

可是若是你的佈局有一個固定高度，你就能夠這樣垂直居中：

1 .parent {
2   position: relative;
3 }
4 .child {
5   position: absolute;
6   top: 50%;
7   height: 100px;
8   margin-top: -50px; /* 若是沒有使用: border-box; 的盒子模型則須要設置這個 */
9 }

 

（2）元素的高度是未知的

 

儘管未知，但你仍有可能向上推移50%的寬度

 

在線演示： http://jsfiddle.net/ourjs/9sLf7p56/

1 .parent {
2   position: relative;
3 }
4 .child {
5   position: absolute;
6   top: 50%;
7   transform: translateY(-50%);
8 }

 

d、你可使用flexbox嗎？

 

這並不奇怪，使用flexbox會容易很是多

 1 <main>  
 2   <div>
 3      I'm a block-level element with an unknown height, centered vertically within my parent.
 4   </div>  
 5 </main>
 6 body {
 7   background: #f06d06;
 8   font-size: 80%;
 9 }
10 main {
11   background: white;
12   height: 300px;
13   width: 200px;
14   padding: 20px;
15   margin: 20px;
16   display: flex;
17   flex-direction: column;
18   justify-content: center;
19   resize: vertical;
20   overflow: auto;
21 }
22 main div {
23   background: black;
24   color: white;
25   padding: 20px;
26   resize: vertical;
27   overflow: auto;
28 }

 

三、同時水平和垂直居中

 

a、元素有固定的寬度和高度

 

若是元素的寬度和高度是固定的，你須要先絕對居中，而後上移和左移50%的寬度便可，這種方案有極好的跨瀏覽器支持。

 1 .parent {
 2   position: relative;
 3 }
 4 .child {
 5   width: 300px;
 6   height: 100px;
 7   padding: 20px;
 8   position: absolute;
 9   top: 50%;
10   left: 50%;
11   margin: -70px 0 0 -170px;
12 }

 

b、元素的寬度高度未知

 

若是你不知道高度和寬度（可變的），你可使用transofrm屬性在兩個方向都平移負50%

1 .parent {
2   position: relative;
3 }
4 .child {
5   position: absolute;
6   top: 50%;
7   left: 50%;
8   transform: translate(-50%, -50%);
9 }