南昌莫非之做網(wǎng)站分享用CSS實(shí)現(xiàn)垂直居中的效果
隨著上網(wǎng)設(shè)備成本的下降和居民收入水平的提高，互聯(lián)網(wǎng)正逐步走進(jìn)千家萬(wàn)戶，越來(lái)越多的企業(yè)認(rèn)識(shí)到了互聯(lián)網(wǎng)的便捷作用。中國(guó)互聯(lián)網(wǎng)信息中心最新調(diào)查統(tǒng)計(jì)，國(guó)內(nèi)網(wǎng)民規(guī)模繼續(xù)呈現(xiàn)持續(xù)快速發(fā)展的趨勢(shì)。
由互聯(lián)網(wǎng)所帶動(dòng)的這場(chǎng)數(shù)字經(jīng)濟(jì)變革，以超乎我們預(yù)期的威力和速度沖擊著社會(huì)的各個(gè)層面。作為全新的媒體和全新的市場(chǎng)，互聯(lián)網(wǎng)改變了人們生活、工作的各個(gè)層面。?
在當(dāng)今互聯(lián)網(wǎng)時(shí)代，一個(gè)企業(yè)沒(méi)有屬于自己的網(wǎng)站，則像是一個(gè)人關(guān)起門(mén)來(lái)做生意，很大程度上會(huì)給企業(yè)帶來(lái)很大的不方便。?
不管是初學(xué)者，還是有經(jīng)驗(yàn)的網(wǎng)站技術(shù)人員，都需要經(jīng)常用css實(shí)現(xiàn)垂直居中的效果。小編總結(jié)了一下在不同瀏覽器下，通過(guò)CSS（層疊樣式表）實(shí)現(xiàn)居中效果的方法。
用絕對(duì)定位實(shí)現(xiàn)垂直居中
舉例說(shuō)明：網(wǎng)站上有一張圖片，我們想讓它居中，首先我們需要?jiǎng)?chuàng)建一個(gè)div容器去包裹它，然后給它定義一些樣式。
HTML
-----
CSS
-----
body{
background: #ccc; /* just to make it visible in screenshots */
}
div{
width: 300px;
height: 250px;
background: #fff;
}
img{
width: 100px;
}
現(xiàn)在我們有了一張包裹在div中的圖片，我們給不光給圖片以及div元素定義了尺寸，還給div元素定義了#fff的背景色。 現(xiàn)在我們需要給我們的父元素添加相對(duì)定位屬性，同時(shí)，要給子元素也就是圖片元素添加絕對(duì)定位屬性。
div{
width: 300px;
height: 250px;
background: #fff;
position: relative;
}
img{
width: 100px;
position: absolute;
}
現(xiàn)在，我們會(huì)將子元素的top屬性設(shè)置為50%。
div{
width: 300px;
height: 250px;
background: #fff;
position: relative;
}
img{
width: 100px;
position: absolute;
top: 50%;
}
目前為止圖片還沒(méi)有實(shí)現(xiàn)垂直居中，現(xiàn)在我們需要給它一個(gè)負(fù)的margin-top值，這個(gè)值為你想要實(shí)現(xiàn)垂直居中的元素高度的一半，在本例中就是那張圖片。 *如果不確定元素的高度，可以不使用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 */
}
如果你想要同時(shí)實(shí)現(xiàn)水平居中，那么你可以用實(shí)現(xiàn)垂直居中的一樣的技巧來(lái)實(shí)現(xiàn)。 利用Display: table;來(lái)實(shí)現(xiàn)垂直居中 我們可以通過(guò)display屬性的table值來(lái)實(shí)現(xiàn)垂直居中。如何實(shí)現(xiàn)呢？ 首先我們先要?jiǎng)?chuàng)建一個(gè)div元素以及另外一個(gè)包含圖片的div元素，然后我們開(kāi)始設(shè)置它的樣式。
HTML
-----
CSS
-----
body{
background: #ccc; /* just to make it visible in screenshots */
}
div{
width: 300px;
height: 250px;
background: #fff;
}
img{
width: 100px;
}
現(xiàn)在，把包裹圖片的那個(gè)div元素的display屬性設(shè)置為table-cell。
div{
width: 300px;
height: 250px;
background: #fff;
display: table;
}
img{
width: 100px;
}
div#img{
display: table-cell;
}
但是現(xiàn)在好像還沒(méi)有居中，對(duì)吧？當(dāng)然啦，為了實(shí)現(xiàn)垂直居中，我們現(xiàn)在要做的就是給包裹圖片的div元素設(shè)置vertical-align: middle;屬性。
div{
width: 300px;
height: 250px;
background: #fff;
display: table;
}
img{
width: 100px;
}
div#img{
display: table-cell;
vertical-align: middle;
}
如果你也想實(shí)現(xiàn)水平居中，你可以給最外層的div元素添加text-align: center屬性，注意不是id=”img”的div 使用flex實(shí)現(xiàn)垂直居中 最后但是也同樣重要的是，你可以利用flex實(shí)現(xiàn)垂直居中。flex可能不是實(shí)現(xiàn)水平垂直居中**的選擇，因?yàn)镮E8,9并不支持它。 你可以點(diǎn)這里看看瀏覽器是否支持：點(diǎn)擊這里 現(xiàn)在，為了用flex實(shí)現(xiàn)垂直居中，我們首先要?jiǎng)?chuàng)建一個(gè)包裹著圖片的div元素，然后給它定義一些基礎(chǔ)屬性。
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 */
}
現(xiàn)在，我們需要把div元素的display屬性設(shè)置為flex。 div{
width: 300px;
height: 250px;
background: #fff;
display: flex;
}
img{
width: 100px;
height: 100px; /* you must give height so it doesn't expand */
}
現(xiàn)在還沒(méi)居中是吧？繼續(xù)，現(xiàn)在我們需要做的就是給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;
}
說(shuō)到這里，相信現(xiàn)在你知道如何用CSS去實(shí)現(xiàn)垂直居中了。希望這篇文章對(duì)大家的有所幫助，當(dāng)然如果關(guān)于網(wǎng)站開(kāi)發(fā)還有什么不明白的地方
