設(shè)置元素水平、垂直居中的兩種方式

一個(gè)水平和垂直居中的模態(tài)彈框這么一個(gè)小需求，對(duì)于我們這些前端來(lái)說(shuō)，應(yīng)該是常事。

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

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

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

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居中是前端工程師經(jīng)常要面對(duì)的問(wèn)題，也是基本技能之一。

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

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

把margin設(shè)為auto

具體來(lái)說(shuō)就是把要居中的元素的margin-left和margin-right都設(shè)為auto，此方法只能進(jìn)行水平的居中，且對(duì)浮動(dòng)元素或絕對(duì)定位元素?zé)o效。

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

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

使用display:table-cell

對(duì)于那些個(gè)不是表格的元素，我們可以通過(guò)display:table-cell 來(lái)把它模擬成一個(gè)表格單元格，然后結(jié)合text-align:center;vertical-align:middle;來(lái)使元素居中。

利用css3的translate實(shí)現(xiàn)居中

css3里的移動(dòng)屬性也能實(shí)現(xiàn)元素的水平居中對(duì)齊。但是，一樣注意的是只支持高版本瀏覽器。IE8及以下版本想都別想了。

彈性盒子實(shí)現(xiàn)垂直水平居中

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

使用表格

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

如果想在css中控制表格內(nèi)容的居中，垂直居中可以使用 vertical-align:middle，至于水平居中，貌似css中是沒(méi)有相對(duì)應(yīng)的屬性的,但是在IE6、7中我們可以使用text-align:center來(lái)對(duì)表格里的元素進(jìn)行水平居中，IE8+以及谷歌、火狐等瀏覽器的text-align:center只對(duì)行內(nèi)元素起作用，對(duì)塊狀元素?zé)o效。

使用絕對(duì)定位來(lái)進(jìn)行居中

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

絕對(duì)定位進(jìn)行居中的原理是通過(guò)把這個(gè)絕對(duì)定位元素的left或top的屬性設(shè)為50%,這個(gè)時(shí)候元素并不是居中的，而是比居中的位置向右或向左偏了這個(gè)元素寬度或高度的一半的距離，所以需要使用一個(gè)負(fù)的margin-left或margin-top的值來(lái)把它拉回到居中的位置，這個(gè)負(fù)的margin值就取元素寬度或高度的一半。

如果只想實(shí)現(xiàn)一個(gè)方向的居中，則可以只使用left , margin-left 來(lái)實(shí)現(xiàn)水平居中，使用top , margin-top來(lái)實(shí)現(xiàn)垂直居中。

終極定位元素居中

通過(guò)讓內(nèi)部定位的盒子left，right，top，bottom四個(gè)值同時(shí)為0，然后讓margin的四個(gè)值自動(dòng)平分空間，實(shí)現(xiàn)元素的垂直水平都居中對(duì)齊。一樣要注意IE7及以下低版本瀏覽器的不配合問(wèn)題。

以上所述是小編給大家介紹的CSS實(shí)現(xiàn)居中的幾種方法，希望對(duì)大家有所幫助。

言

老板的手機(jī)收到一個(gè)紅包，為什么紅包沒(méi)居中？

如何讓一個(gè)子元素在父容器里水平垂直居中？這個(gè)問(wèn)題必考，在實(shí)戰(zhàn)開發(fā)中，也應(yīng)用得非常多。

你也許能順手寫出好幾種實(shí)現(xiàn)方法。但大部分人的寫法不夠規(guī)范，經(jīng)不起千錘百煉。換句話說(shuō)：這些人也就面試的時(shí)候夸夸其談，但真的上戰(zhàn)場(chǎng)的時(shí)候，他們不敢這么寫，也不知道怎么寫最靠譜。

這篇文章中，我們來(lái)列出幾種常見的寫法，最終你會(huì)明白，哪種寫法是最優(yōu)雅的。

當(dāng)然，我還會(huì)拿出實(shí)際應(yīng)用中的真實(shí)場(chǎng)景來(lái)舉例，讓你感受一下標(biāo)準(zhǔn)垂直居中的魅力。

在線咨詢

上一篇：P2P技術(shù)詳解(三)：P2P中的NAT穿越(打洞)方
下一篇：深受美國(guó)年輕人喜歡的桑德斯，為何競(jìng)選之路堪憂？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商