網頁前端開發中，經常會遇到讓一個塊狀元素水平或垂直居中的情況

你知道如何在自適應屏幕的情況下保持元素居中么？

元素居中這是前端開發中最常見的任務之一

對于行內元素，我們可以對父元素使用 text-align: center屬性來輕松處理；

對于塊狀元素，想必用的最多的就是對其使用 margin:0 auto?這個屬性了

但是這個居中方法在某些特定的情況下并不理想。

比如在處理一個全屏banner的時候，利用一張高清大圖作為背景，在圖片上方布置文字或者其他元素來實現高端大氣的效果。

如上圖所示，典型的企業官網首頁banner

CSS3 絕對定位自適應居中

一般情況下我們不會將背景圖的width設為100% 因為不同的屏幕尺寸會使其擠壓變形，就算是高度自適應也會導致banner高度變化，內部元素位置混亂。所以很多圖片背景都會直接將其width設為原圖寬度，并將父元素增加?overflow: hidden防止溢出。

下面給出一個demo

CSS3絕對定位自適應居中 - 米撲博客

*{

margin: 0 ;

padding: 0;

border: 0;

}

.wrap{

width: 100%;

height: 900px;

position: relative;

overflow: hidden;

}

.banner {

width: 1920px;

height: 900px;

overflow: hidden;

}

.banner img{

width: 1920px;

}

.banner p{

position: absolute;

top: 30%;

width: 100%;

padding: 50px 0;

text-align: center;

font-size: 100px;

color: #fff;

font-family: 'Merienda-Regular';

text-shadow: 2px 2px 10px #000;

}

HELLO WORLD

預覽demo可以看到，在瀏覽器寬度為1920px的時候，整個banner完美展現出來；但是當瀏覽器寬度小于1920px的時候，雖然文字依然居中，而背景圖片卻一直左對齊，導致本來頗具意境的眼鏡、咖啡圖像被遮蓋，完全失去了banner的高端大氣。

那該怎么改進呢？

此時就算是再給.banner元素加margin:0 auto;它也不會居中顯示，因為它本身的寬度大于父元素.wrap的寬度了。

此時我們可以采用絕對定位來實現其自適應居中，首先給.banner賦予絕對定位屬性，然后給它一個定位值left:50%;讓它來到父容器的中間，然后再讓它向左偏移自身寬度一半的距離margin-left:-960px;此時它是不是已經在水平方向自適應居中了？

.banner {

position: absolute;

top:0;

left: 50%;

margin-left: -960px;

}

此時你是不是已經恍然大悟了，哦，原來是這樣子啊。這個時候無論瀏覽器的寬度怎么變化，整張背景圖都會牢牢的居中，重要的內容表達不會被遮蓋掉。如下所示，同樣的瀏覽器尺寸，卻不一樣的Banner效果。

同理，讓一個元素水平垂直自適應居中的代碼如下

.xxx{

position:absoulte;

overflow:hidden;

left:50%;

margin-left:自身寬度一半;

top:50;

margin-top:自身高度一半;

}

絕對定位的元素left或top 設置為50%的時候，

其左側或頂部就會處于父元素的水平或者垂直中間，

此時在用margin屬性添加負值補償自身寬度/高度一半的距離，就可實現元素的絕對居中。

這個方法非常實用，在前端開發中處理元素定位問題上簡單高效，

常見的遮罩、彈窗都會使用它來實現在屏幕上的絕對居中。

參考推薦：

總結

以上是生活随笔為你收集整理的css3绝对定位垂直居中,CSS3绝对定位自适应居中 - 米扑博客的全部內容，希望文章能夠幫你解決所遇到的問題。

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