網(wǎng)站案例網(wǎng)站套餐網(wǎng)站功能網(wǎng)站SEO優(yōu)化南昌網(wǎng)站建設(shè)九江網(wǎng)站建設(shè)萍鄉(xiāng)網(wǎng)站建設(shè)景德鎮(zhèn)網(wǎng)站建設(shè)新余網(wǎng)站建設(shè)鷹潭網(wǎng)站建設(shè)贛州網(wǎng)站建設(shè)吉安網(wǎng)站建設(shè)宜春網(wǎng)站建設(shè)撫州網(wǎng)站建設(shè)上饒網(wǎng)站建設(shè)樂平網(wǎng)站建設(shè)瑞昌網(wǎng)站建設(shè)共青城網(wǎng)站建設(shè)廬山網(wǎng)站建設(shè)貴溪網(wǎng)站建設(shè)南京網(wǎng)站建設(shè)沈陽網(wǎng)站建設(shè)石家莊網(wǎng)站建設(shè)哈爾濱網(wǎng)站建設(shè)杭州網(wǎng)站建設(shè)長沙網(wǎng)站建設(shè)濟(jì)南網(wǎng)站建設(shè)煙臺(tái)網(wǎng)站建設(shè)廣州網(wǎng)站建設(shè)武漢網(wǎng)站建設(shè)成都網(wǎng)站建設(shè)蘭州網(wǎng)站建設(shè)昆明網(wǎng)站建設(shè)臺(tái)北網(wǎng)站建設(shè)南寧網(wǎng)站建設(shè)銀川網(wǎng)站建設(shè)太原網(wǎng)站建設(shè)長春網(wǎng)站建設(shè)合肥網(wǎng)站建設(shè)鄭州網(wǎng)站建設(shè)西安網(wǎng)站建設(shè)西寧網(wǎng)站建設(shè)呼和浩特網(wǎng)站建設(shè)拉薩網(wǎng)站建設(shè)烏魯木齊網(wǎng)站建設(shè)貴陽網(wǎng)站建設(shè)深圳網(wǎng)站建設(shè)??诰W(wǎng)站建設(shè)南昌網(wǎng)站建設(shè)矩惠互動(dòng)游戲微傳單企業(yè)郵箱小程序價(jià)格資訊中心
全國服務(wù)熱線:
0791-88196636

南昌莫非之做網(wǎng)站分享用CSS實(shí)現(xiàn)垂直居中的效果

 二維碼 4
發(fā)表時(shí)間:2016-03-01 11:36作者:南昌莫非傳媒來源:南昌莫非網(wǎng)絡(luò)科技公司網(wǎng)址:http://jiuyecheng.net

南昌莫非之做網(wǎng)站分享用CSS實(shí)現(xiàn)垂直居中的效果

隨著上網(wǎng)設(shè)備成本的下降和居民收入水平的提高,互聯(lián)網(wǎng)正逐步走進(jìn)千家萬戶,越來越多的企業(yè)認(rèn)識(shí)到了互聯(lián)網(wǎng)的便捷作用。中國互聯(lián)網(wǎng)信息中心最新調(diào)查統(tǒng)計(jì),國內(nèi)網(wǎng)民規(guī)模繼續(xù)呈現(xiàn)持續(xù)快速發(fā)展的趨勢。


由互聯(lián)網(wǎng)所帶動(dòng)的這場數(shù)字經(jīng)濟(jì)變革,以超乎我們預(yù)期的威力和速度沖擊著社會(huì)的各個(gè)層面。作為全新的媒體和全新的市場,互聯(lián)網(wǎng)改變了人們生活、工作的各個(gè)層面。?


在當(dāng)今互聯(lián)網(wǎng)時(shí)代,一個(gè)企業(yè)沒有屬于自己的網(wǎng)站,則像是一個(gè)人關(guān)起門來做生意,很大程度上會(huì)給企業(yè)帶來很大的不方便。?


不管是初學(xué)者,還是有經(jīng)驗(yàn)的網(wǎng)站技術(shù)人員,都需要經(jīng)常用css實(shí)現(xiàn)垂直居中的效果。小編總結(jié)了一下在不同瀏覽器下,通過CSS(層疊樣式表)實(shí)現(xiàn)居中效果的方法。

用絕對定位實(shí)現(xiàn)垂直居中

舉例說明:網(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)在我們需要給我們的父元素添加相對定位屬性,同時(shí),要給子元素也就是圖片元素添加絕對定位屬性。

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%;

}

目前為止圖片還沒有實(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)垂直居中的一樣的技巧來實(shí)現(xiàn)。 利用Display: table;來實(shí)現(xiàn)垂直居中 我們可以通過display屬性的table值來實(shí)現(xiàn)垂直居中。如何實(shí)現(xiàn)呢? 首先我們先要?jiǎng)?chuàng)建一個(gè)div元素以及另外一個(gè)包含圖片的div元素,然后我們開始設(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)在好像還沒有居中,對吧?當(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)在還沒居中是吧?繼續(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;

}

說到這里,相信現(xiàn)在你知道如何用CSS去實(shí)現(xiàn)垂直居中了。希望這篇文章對大家的有所幫助,當(dāng)然如果關(guān)于網(wǎng)站開發(fā)還有什么不明白的地方

企業(yè)新聞
關(guān)于南昌莫非網(wǎng)絡(luò)科技公司2022年元旦放假安排通知.元旦:1月1日(星期六)至1月3號(hào)(星期一)放假,共計(jì)三天(無調(diào)休),1月4日(星期二)上班。
關(guān)于南昌莫非網(wǎng)絡(luò)科技公司2021年國慶節(jié)放假安排通知。根據(jù)《國務(wù)院辦公廳關(guān)于2021年部分節(jié)假日安排的通知》(國辦發(fā)明電〔2020〕27號(hào)),結(jié)合我單位工作實(shí)際情況,現(xiàn)就2021年國慶放假的有關(guān)事項(xiàng)安排如下。
南昌莫非網(wǎng)絡(luò)科技公司2021年中秋節(jié)放假通知.一、假期從:2021年09月19日到2021年09月21日結(jié)束,假期共3天(9月18日正常上班,9月26日正常休息)。二、如有緊急情況,請各位同仁及時(shí)配合相關(guān)部門主管人員把事情處理妥善。做好防火、防盜工作并督促各部門關(guān)好辦公區(qū)域的門、窗等。
根據(jù)《國務(wù)院辦公廳關(guān)于2021年部分節(jié)假日安排的通知》(國辦發(fā)明電〔2020〕27號(hào)),結(jié)合我單位工作實(shí)際情況,現(xiàn)就2021年端午節(jié)放假的有關(guān)事項(xiàng)安排如下:一、放假時(shí)間:2021年6月12日(星期六)至2021年6月14日(星期一),共放假3天。
南昌莫非網(wǎng)絡(luò)科技公司2021年五一勞動(dòng)節(jié)放假通知.現(xiàn)就2021年五一勞動(dòng)節(jié)放假的有關(guān)事項(xiàng)安排如下:一、放假時(shí)間,2021年5月1日(星期六)至2020年5月5日(星期三),共放假5天。4月25日(星期日)上班,5月6日(星期四)正常上班。
南昌莫非網(wǎng)絡(luò)科技公司2021年清明節(jié)放假通知.2021年4月3日(星期六)-2021年4月5日(星期一)放假,共3天。4月6日(星期二)正常上班。放假期間,各項(xiàng)業(yè)務(wù)照常運(yùn)行,售后問題您可以直接相關(guān)負(fù)責(zé)人提交服務(wù)單,技術(shù)人員將在12小時(shí)之內(nèi)處理。
關(guān)于南昌莫非網(wǎng)絡(luò)科技公司2021年春節(jié)放假安排通知.一、春節(jié)放假時(shí)間:2021年2月5日(農(nóng)歷臘月二十四)至2021年2月18日(農(nóng)歷正月初七)放假,共13天,2月19日(星期五)開始上班,2月21日星期日(農(nóng)歷正月初十)恢復(fù)正常上班。由于疫情,假期時(shí)間可能會(huì)有所變化,具體以通知為準(zhǔn)。
關(guān)于南昌莫非網(wǎng)絡(luò)科技公司2021年01月01日元旦放假通知。一、放假時(shí)間:2021年1月1日(星期五)至2021年1月3日(星期日)放假,共3天;2021年1月4日(星期一)正常上班。公司放假期間如有相關(guān)業(yè)務(wù)及服務(wù)事宜敬請撥打我司24小時(shí)服務(wù)熱線:0791-8819-6636或咨詢客服QQ:2401077293,可隨時(shí)與我司進(jìn)行聯(lián)系。
南昌莫非網(wǎng)絡(luò)科技公司2020年中秋節(jié)+國慶節(jié)放假通知。根據(jù)《國務(wù)院辦公廳關(guān)于2020年部分節(jié)假日安排的通知》,為了讓大家度過一個(gè)充實(shí)、平安的假期,現(xiàn)把2020年中秋國慶放假時(shí)間及溫馨提示通知如下!
南昌莫非網(wǎng)絡(luò)科技公司2020年五一放假通知.在過去的歲月里,南昌莫非網(wǎng)絡(luò)科技公司與新老客戶一直保持著愉快的合作,這離不開大家的鼎立支持和幫助。在未來的日子里還需要更多朋友們的支持與幫助,希望你們能始終如一的支持南昌莫非網(wǎng)絡(luò)科技,并提出您寶貴的意見及建議。
南昌莫非網(wǎng)絡(luò)科技公司2020年春節(jié)寒假放假安排通知。南昌莫非網(wǎng)絡(luò)科技公司提前祝全國合作伙伴新春快樂、闔家幸福!預(yù)祝全體員工春節(jié)快樂!
南昌莫非網(wǎng)絡(luò)科技公司2020年元旦節(jié)放假安排通知.元旦將至,南昌莫非網(wǎng)絡(luò)科技公司預(yù)祝全體員工元旦快樂!現(xiàn)將2020年元旦節(jié)放假安排通告如下:一、放假時(shí)間:2020年1月1日,共1天。
地區(qū)做網(wǎng)站導(dǎo)航
南昌網(wǎng)站建設(shè)  九江網(wǎng)站建設(shè)  萍鄉(xiāng)網(wǎng)站建設(shè) 景德鎮(zhèn)網(wǎng)站建設(shè)  新余網(wǎng)站建設(shè)  鷹潭網(wǎng)站建設(shè) 贛州網(wǎng)站建設(shè)  吉安網(wǎng)站建設(shè)  宜春網(wǎng)站建設(shè)  撫州網(wǎng)站建設(shè)  上饒網(wǎng)站建設(shè)  樂平網(wǎng)站建設(shè) 瑞昌網(wǎng)站建設(shè)  共青城網(wǎng)站建設(shè)  廬山網(wǎng)站建設(shè)  貴溪網(wǎng)站建設(shè)  南京網(wǎng)站建設(shè)  沈陽網(wǎng)站建設(shè)  石家莊網(wǎng)站建設(shè)  哈爾濱網(wǎng)站建設(shè)  杭州網(wǎng)站建設(shè)  長沙網(wǎng)站建設(shè)  濟(jì)南網(wǎng)站建設(shè) 煙臺(tái)網(wǎng)站建設(shè)  廣州網(wǎng)站建設(shè)  武漢網(wǎng)站建設(shè)  成都網(wǎng)站建設(shè) 蘭州網(wǎng)站建設(shè)  昆明網(wǎng)站建設(shè)  臺(tái)北網(wǎng)站建設(shè) 南寧網(wǎng)站建設(shè)  銀川網(wǎng)站建設(shè)  太原網(wǎng)站建設(shè)  長春網(wǎng)站建設(shè)  合肥網(wǎng)站建設(shè)  鄭州網(wǎng)站建設(shè)  西寧網(wǎng)站建設(shè) 西安網(wǎng)站建設(shè)  呼和浩特網(wǎng)站建設(shè)  拉薩網(wǎng)站建設(shè)  烏魯木齊網(wǎng)站建設(shè)  貴陽網(wǎng)站建設(shè) 深圳網(wǎng)站建設(shè)  ??诰W(wǎng)站建設(shè)

南昌莫非網(wǎng)絡(luò)科技公司專汪做網(wǎng)站,網(wǎng)頁設(shè)計(jì),網(wǎng)站制作,網(wǎng)站開發(fā),建網(wǎng)站,定制網(wǎng)站。十三年品牌值得信賴!

網(wǎng)站建設(shè)行業(yè)方案
網(wǎng)站維護(hù)知識(shí)
網(wǎng)站制作常見問題
SEO網(wǎng)站優(yōu)化教程
踏上云端,轉(zhuǎn)型升級(jí)融入互聯(lián)網(wǎng)時(shí)代,現(xiàn)在就聯(lián)系我們吧!
——      我們時(shí)刻為你提供更多優(yōu)質(zhì)互聯(lián)網(wǎng)技術(shù)服務(wù)      ——
姓名:
*
聯(lián)系方式:
*
咨詢項(xiàng)目:
內(nèi)容:
*
在線留言
關(guān)于我們:南昌莫非文化傳媒有限公司(簡稱:莫非傳媒)專注于網(wǎng)站建設(shè),網(wǎng)站SEO優(yōu)化,小程序制作。提供全方位用戶體驗(yàn)規(guī)劃,品牌形象設(shè)計(jì)服務(wù)。為每一位企業(yè)客戶的成長、騰飛助力!        網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站開發(fā),就選網(wǎng)站建設(shè)公司-南昌莫非傳媒!
掃一掃微信便捷交流
|
|
|
|
|
|
|
|
|
|
|
|
|
地址:江西省南昌市西湖區(qū)洪城路6號(hào)國貿(mào)廣場A座巨豪峰
業(yè)務(wù)咨詢  :  
272482065
售后服務(wù) :
2401077293
服務(wù)熱線:
0791-88196636
______________________________________________________________________________________________________________________________________________________________________________________________________
亚洲免费视频中文字幕在线观看 | 丰满少妇被猛烈撞击在线视频| 亚洲伦理中文字幕在线观看| 正在播放玩弄漂亮少妇高潮| 美女被啪的视频在线观看| 日本在线 一区 二区| 一区二区三区日韩中文| 欧美中文字幕日韩精品| 九九热精品视频免费在线播放| 一区二区三区在线不卡免费| 后入美臀少妇一区二区| 青青操日老女人的穴穴| 日韩一区二区三区有码| 日韩成人中文字幕在线一区| 免费在线播放一区二区| 国产日韩熟女中文字幕| 亚洲日本加勒比在线播放| 粉嫩国产一区二区三区在线| 日韩18一区二区三区| 精品人妻av区波多野结依| 日韩欧美一区二区黄色| 爽到高潮嗷嗷叫之在现观看| 亚洲中文字幕综合网在线| 日本深夜福利在线播放| 亚洲精品中文字幕在线视频| 视频一区日韩经典中文字幕| 国产精品午夜福利在线观看| 亚洲一区二区三区av高清| 欧美三级精品在线观看| 亚洲综合伊人五月天中文| 99日韩在线视频精品免费| 福利新区一区二区人口| 欧美成人免费夜夜黄啪啪| 国产亚洲神马午夜福利| 国产一区二区三区草莓av| 国产白丝粉嫩av在线免费观看| 午夜精品国产一区在线观看| 果冻传媒精选麻豆白晶晶| 欧美午夜伦理在线观看| 国产欧美一区二区色综合| 国产精品午夜一区二区三区|