導讀：

CSS 的居中有水平居中和垂直居中,這兩種居中又分為行內元素居中和塊級元素居中。根據父、子元素的高度是否清楚，又會使得不同的居中用不同方法。本文就其中一些情況做下簡單說明，以作筆記之用，僅供大家參考。

1、文本居中

先上示例中的結構：

<!-- html 結構 --> <div class="parent"><span class="child">some text</span> </div> <!-- 以便查看效果添加如下樣式 --> .parent {border: 1px solid #000; } .child { }

1-1、水平居中

文本在元素內居中對齊，可以使用 text-align: center;。因為 text-align 屬性是會被繼承的，所以寫在父元素或者子元素上都可以實現居中，這里我們對父元素進行設置：

.parent {text-align: center; } some text

1-2、垂直居中

1-2-1、文本在元素內垂直對齊，可以使用設置 line-height 的值為包含元素的高度，所以這里我們需要設置父元素的高度。line-height 屬性同樣會被繼承，這里我們對子元素進行設置：

.parent {height: 60px; } .child {line-height: 60px; } some text

1-2-2、也可以對父元素使用 padding 進行居中，：

.parent {padding: 30px 0; } some text

1-3、水平垂直居中

1-3-1、如果要水平和垂直都居中，可以使用 line-height 和 text-align: center;。

.parent {text-align: center;height: 60px;line-height: 60px; } some text

1-3-2、也可以使用 padding 和 text-align: center;。

.parent {text-align: center;padding: 30px 0; } some text

自然直接使用 padding: 30px;也可以實現水平垂直居中。

2、塊元素居中

同樣先上示例中的結構：

<!-- html 結構 --> <div class="parent"><div class="child"></div> </div> <!-- 以便查看效果添加如下樣式 --> <!-- 如果實例中沒有指明需要知道父、子元素的高度或寬度則對應方法對此不作要求 --> .parent {height: 80px;border: 1px solid #000; } .child {height: 40px;width: 80%;background-color:#c0c0c0; }

2-1、水平居中

2-1-1、要水平居中對齊一個元素(如 <div>), 可以使用 margin: auto;。

.child {margin: 0 auto;width:80%; }

注意：該方法必須設置子元素的 width 屬性(且不能為100%)。

2-1-2、在父元素中設置 text-align: center;，子元素中設置 display: inline-block;*zoom:1;。

.parent {text-align: center; } .child {display: inline-block;*zoom:1; /* 兼容 IE6、7 */ }

2-1-3、在子元素中設置 display:table;margin: 0 auto;。

.child {display: inline-block;*zoom:1; /* 兼容 IE6、7 */ }

2-1-4、absolute 配合 transform。

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

2-1-5、強大的 flex 布局中的 justify-content: center;。

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

2-2垂直居中

2-2-1、對父元素設置 display: table-cell;vertical-align:middle;。

.parent {display: table-cell;width:100px; /* 對table-cell元素設置百分比（如100%）的寬高值時無效的,所以我們需要這樣設置 *//* 但是可以將父元素設置display:table，再將父元素設置百分比寬高 *//* 子元素table-cell會自動撐滿父元素。這就可以做相對于整個頁面的水平垂直居中 *//* 此處為不破壞文章結構，實例采用并非上面展示的 width:100px; 而是第二種方法 */vertical-align:middle; }

2-2-2、absolute 配合 transform。

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

2-2-3、強大的 flex 布局中的 align-items: center;。

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

2-3、完美居中(水平+垂直)

2-3-1、absolute 配合 transform。

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

2-3-2、強大的 flex布局。

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

寫在最后

實現居中的方法還有許多，根據不同的情況也會有不同的處理方式，本文只是簡單的記錄了其中一些，且涉及到一些兼容性并沒有提及，學習需謹慎，若是文中有什么錯誤，歡迎指正。

轉載于:https://www.cnblogs.com/anani/p/8611859.html

總結

以上是生活随笔為你收集整理的CSS 中的各种居中 (水平、垂直)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。