一個水平和垂直居中的模態彈框這么一個小需求，對于我們這些前端來說，應該是常事。

在css3出來以前，我們要想讓元素既水平居中又要垂直居中只有一個辦法（我能想到的），就是通過js計算，把它們定位到屏幕中間位置。這方法比較笨，也麻煩。

推薦下我的前端群：524262608，不管你是小白還是大牛，小編我都挺歡迎，不定期分享干貨，包括我自己整理的一份最新的前端資料和零基礎入門教程，歡迎初學和進階中的小伙伴。

下面兩種方式，可以讓元素快速定位到屏幕中間。　

flex布局

1 <style> 
2 .flex-mask { 
3 display: flex; 
4 position: fixed; 
5 z-index: 1; 
6 top: 0; 
7 left: 0; 
8 bottom: 0; 
9 right: 0;
10 align-items: center;　　// 垂直居中
11 justify-content: center;　　// 水平居中
12 background: rgba(0,0,0,.5);
13 }
14 .flex-box {
15 width: 500px;
16 height: 300px;
17 background-color: #fff;
18 border-radius: 10px;
19 }
20 </style>
21 
22 <!-- 元素 -->
23 <div class="flex-mask">
24 <div class="flex-box"></div>
25 </div>

使用translate

SS居中是前端工程師經常要面對的問題，也是基本技能之一。

CSS中的居中可分為水平居中和垂直居中。水平居中分為行內元素居中和塊狀元素居中兩種情況，而塊狀元素又分為定寬塊狀元素居中和不定寬塊狀元素居中。

今天，我們就和大家分享一些居中的常用方法。

把margin設為auto

具體來說就是把要居中的元素的margin-left和margin-right都設為auto，此方法只能進行水平的居中，且對浮動元素或絕對定位元素無效。

使用line-height讓單行文字垂直居中

把文字的line-height設為文字父容器的高度，適用于只有一行文字的情況。

使用display:table-cell

對于那些個不是表格的元素，我們可以通過display:table-cell 來把它模擬成一個表格單元格，然后結合text-align:center;vertical-align:middle;來使元素居中。

利用css3的translate實現居中

css3里的移動屬性也能實現元素的水平居中對齊。但是，一樣注意的是只支持高版本瀏覽器。IE8及以下版本想都別想了。

彈性盒子實現垂直水平居中

彈性盒子也是css3新增的樣式，完全解決了垂直布局難的問題。需要注意的是 ：一樣要考慮瀏覽器的兼容性。

使用表格

如果你使用的是表格的話，那完全不用為各種居中問題而煩惱了，只要用到 td(也可能會用到 th)元素的 align=”center” 以及 valign=”middle” 這兩個屬性就可以完美的處理它里面內容的水平和垂直居中問題了,而且表格默認的就會對它里面的內容進行垂直居中。

如果想在css中控制表格內容的居中，垂直居中可以使用 vertical-align:middle，至于水平居中，貌似css中是沒有相對應的屬性的,但是在IE6、7中我們可以使用text-align:center來對表格里的元素進行水平居中，IE8+以及谷歌、火狐等瀏覽器的text-align:center只對行內元素起作用，對塊狀元素無效。

使用絕對定位來進行居中

此法只適用于那些我們已經知道它們的寬度或高度的元素。

絕對定位進行居中的原理是通過把這個絕對定位元素的left或top的屬性設為50%,這個時候元素并不是居中的，而是比居中的位置向右或向左偏了這個元素寬度或高度的一半的距離，所以需要使用一個負的margin-left或margin-top的值來把它拉回到居中的位置，這個負的margin值就取元素寬度或高度的一半。

如果只想實現一個方向的居中，則可以只使用left , margin-left 來實現水平居中，使用top , margin-top來實現垂直居中。

終極定位元素居中

通過讓內部定位的盒子left，right，top，bottom四個值同時為0，然后讓margin的四個值自動平分空間，實現元素的垂直水平都居中對齊。一樣要注意IE7及以下低版本瀏覽器的不配合問題。

以上所述是小編給大家介紹的CSS實現居中的幾種方法，希望對大家有所幫助。