不管是初學者，還是有經驗的網站技術人員，都需要經常用css實現垂直居中的效果。武漢做網站 易人宣網絡科技總結了一下在不同瀏覽器下，通過CSS（層疊樣式表）實現居中效果的方法。
css 用絕對定位實現垂直居中
舉例說明：網站上有一張圖片，我們想讓它居中，首先我們需要創建一個div容器去包裹它，然后給它定義一些樣式。 
HTML
-----
CSS
-----
body{
background: #ccc;  /* just to make it visible in screenshots */
}
div{
width: 300px;
height: 250px;
background: #fff;
}
img{
width: 100px;
}
現在我們有了一張包裹在div中的圖片，我們給不光給圖片以及div元素定義了尺寸，還給div元素定義了#fff的背景色。 現在我們需要給我們的父元素添加相對定位屬性，同時，要給子元素也就是圖片元素添加絕對定位屬性。 
div{
width: 300px;
height: 250px;
background: #fff;
position: relative;
}
img{
width: 100px;
position: absolute;
}
現在，我們會將子元素的top屬性設置為50%。 
div{
width: 300px;
height: 250px;
background: #fff;
position: relative;
}
img{
width: 100px;
position: absolute;
top: 50%;
}
目前為止圖片還沒有實現垂直居中，現在我們需要給它一個負的margin-top值，這個值為你想要實現垂直居中的元素高度的一半，在本例中就是那張圖片。 *如果不確定元素的高度，可以不使用margin-top，而是使用transform:translateY(-50%);屬性。 div{
width: 300px;
height: 250px;
background: #fff;
position: relative;
}
img{
width: 100px;
position: absolute;
top: 50%;
margin-top: -50px; /* half the size of image */
}
武漢做網站 易人宣網絡友情提醒：如果你想要同時實現水平居中，那么你可以用實現垂直居中的一樣的技巧來實現。 利用Display: table;來實現垂直居中 我們可以通過display屬性的table值來實現垂直居中。如何實現呢？ 首先我們先要創建一個div元素以及另外一個包含圖片的div元素，然后我們開始設置它的樣式。
HTML
-----
CSS
-----
body{
background: #ccc;  /* just to make it visible in screenshots */
}
div{
width: 300px;
height: 250px;
background: #fff;
}
img{
width: 100px;
}
現在，把包裹圖片的那個div元素的display屬性設置為table-cell。 
div{
width: 300px;
height: 250px;
background: #fff;
display: table;
}
img{
width: 100px;
}
div#img{
display: table-cell;
} 
但是現在好像還沒有居中，對吧？當然啦，為了實現垂直居中，我們現在要做的就是給包裹圖片的div元素設置vertical-align: middle;屬性。 
div{
width: 300px;
height: 250px;
background: #fff;
display: table;
}
img{
width: 100px;
}
div#img{
display: table-cell;
vertical-align: middle;
}
武漢做網站 易人宣網絡提示：如果你也想實現水平居中，你可以給最外層的div元素添加text-align: center屬性，注意不是id=”img”的div 使用flex實現垂直居中 最后但是也同樣重要的是，你可以利用flex實現垂直居中。flex可能不是實現水平垂直居中最好的選擇，因為IE8,9并不支持它。 你可以點這里看看瀏覽器是否支持：點擊這里 現在，為了用flex實現垂直居中，我們首先要創建一個包裹著圖片的div元素，然后給它定義一些基礎屬性。 
HTML
----------
CSS
-----
body{
background: #ccc;  /* just to make it visible in screenshots */
}
div{
width: 300px;
height: 250px;
background: #fff;
}
img{
width: 100px;
height: 100px;  /* you must give height so it doesn't expand */
}
現在，我們需要把div元素的display屬性設置為flex。 div{
width: 300px;
height: 250px;
background: #fff;
display: flex;
}
img{
width: 100px;
height: 100px;   /* you must give height so it doesn't expand */
}
現在還沒居中是吧？繼續，現在我們需要做的就是給div添加另外一條屬性align-items: center; 
div{
width: 300px;
height: 250px;
background: #fff;
display: flex;
align-items: center;
}
img{
width: 100px;
height: 100px;   /* you must give height so it doesn't expand */
align-items: center;
}
說到這里，相信現在你知道如何用CSS去實現垂直居中了。希望這篇文章對大家的有所幫助，當然如果關于網站開發還有什么不明白的地方，武漢做網站 易人宣網絡技術人員很樂意和大學交流心得。

了解更多武漢網站建設_漢陽網站建設_武漢網站設計_武漢網站制作知識可在線咨詢或添加易人宣網絡小易姐姐微信:13307186778