摘要:原文鏈接水平居中若是行內(nèi)元素給其父元素設(shè)置即可實(shí)現(xiàn)行內(nèi)元素水平居中若是塊級(jí)元素該元素設(shè)置即可若子元素包含屬性為了讓子元素水平居中則可讓父元素寬度設(shè)置為并且配合作如下設(shè)置是中給屬性新加的一個(gè)屬性值它配合可以輕松實(shí)現(xiàn)水平居中
原文鏈接
水平居中1) 若是行內(nèi)元素, 給其父元素設(shè)置 text-align:center,即可實(shí)現(xiàn)行內(nèi)元素水平居中.
2) 若是塊級(jí)元素, 該元素設(shè)置 margin:0 auto即可.
3) 若子元素包含 float:left 屬性, 為了讓子元素水平居中, 則可讓父元素寬度設(shè)置為fit-content,并且配合margin, 作如下設(shè)置:
.parent{ width: -moz-fit-content; width: -webkit-fit-content; width:fit-content; margin:0 auto; }
fit-content是CSS3中給width屬性新加的一個(gè)屬性值,它配合margin可以輕松實(shí)現(xiàn)水平居中, 目前只支持Chrome 和 Firefox瀏覽器.
4) 使用flex 2012年版本布局, 可以輕松的實(shí)現(xiàn)水平居中, 子元素設(shè)置如下:
.son{ display: flex; justify-content: center; }
5) 使用flex 2009年版本, 父元素display: box;box-pack: center;如下設(shè)置:
.parent { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; display: -moz-box; -moz-box-orient: horizontal; -moz-box-pack: center; display: -o-box; -o-box-orient: horizontal; -o-box-pack: center; display: -ms-box; -ms-box-orient: horizontal; -ms-box-pack: center; display: box; box-orient: horizontal; box-pack: center; }
6) 使用CSS3中新增的transform屬性, 子元素設(shè)置如下:
.son{ position:absolute; left:50%; transform:translate(-50%,0); }
7) 使用絕對(duì)定位方式, 以及負(fù)值的margin-left, 子元素設(shè)置如下:
.son{ position:absolute; width:固定; left:50%; margin-left:-0.5寬度; }
8) 使用絕對(duì)定位方式, 以及l(fā)eft:0;right:0;margin:0 auto; 子元素設(shè)置如下:
.son{ position:absolute; width:固定; left:0; right:0; margin:0 auto; }垂直居中
單行文本
1) 若元素是單行文本, 則可設(shè)置 line-height 等于父元素高度
行內(nèi)塊級(jí)元素
2) 若元素是行內(nèi)塊級(jí)元素, 基本思想是使用display: inline-block, vertical-align: middle和一個(gè)偽元素讓內(nèi)容塊處于容器中央.
.parent::after, .son{ display:inline-block; vertical-align:middle; } .parent::after{ content:""; height:100%; }
這是一種很流行的方法, 也適應(yīng)IE7.
元素高度不定
3) 可用 vertical-align 屬性, 而vertical-align只有在父層為 td 或者 th 時(shí), 才會(huì)生效, 對(duì)于其他塊級(jí)元素, 例如 div、p 等, 默認(rèn)情況是不支持的. 為了使用vertical-align, 我們需要設(shè)置父元素display:table, 子元素 display:table-cell;vertical-align:middle;
優(yōu)點(diǎn)
元素高度可以動(dòng)態(tài)改變, 不需再CSS中定義, 如果父元素沒有足夠空間時(shí), 該元素內(nèi)容也不會(huì)被截?cái)?
缺點(diǎn)
IE6~7, 甚至IE8 beta中無效.
4) 可用 Flex 2012版, 這是CSS布局未來的趨勢. Flexbox是CSS3新增屬性, 設(shè)計(jì)初衷是為了解決像垂直居中這樣的常見布局問題.
父元素做如下設(shè)置即可保證子元素垂直居中:
.parent { display: flex; align-items: center; }
優(yōu)點(diǎn)
內(nèi)容塊的寬高任意, 優(yōu)雅的溢出.
可用于更復(fù)雜高級(jí)的布局技術(shù)中.
缺點(diǎn)
IE8/IE9不支持
需要瀏覽器廠商前綴
渲染上可能會(huì)有一些問題
5) 使用flex 2009版.
.parent { display: box; box-orient: vertical; box-pack: center; }
優(yōu)點(diǎn)
實(shí)現(xiàn)簡單, 擴(kuò)展性強(qiáng)
缺點(diǎn)
兼容性差, 不支持IE
6) 可用 transform , 設(shè)置父元素相對(duì)定位(position:relative), 子元素如下css樣式:
.son{ position:absolute; top:50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
優(yōu)點(diǎn)
代碼量少
缺點(diǎn)
IE8不支持, 屬性需要追加瀏覽器廠商前綴, 可能干擾其他 transform 效果, 某些情形下會(huì)出現(xiàn)文本或元素邊界渲染模糊的現(xiàn)象.
元素高度固定
7) 設(shè)置父元素相對(duì)定位(position:relative), 子元素如下css樣式:
.son{ position:absolute; top:50%; height:固定; margin-top:-0.5高度; }
優(yōu)點(diǎn)
適用于所有瀏覽器.
缺點(diǎn)
父元素空間不夠時(shí), 子元素可能不可見(當(dāng)瀏覽器窗口縮小時(shí),滾動(dòng)條不出現(xiàn)時(shí)).如果子元素設(shè)置了overflow:auto, 則高度不夠時(shí), 會(huì)出現(xiàn)滾動(dòng)條.
8) 設(shè)置父元素相對(duì)定位(position:relative), 子元素如下css樣式:
.son{ position:absolute; height:固定; top:0; bottom:0; margin:auto 0; }
簡單
缺點(diǎn)
沒有足夠空間時(shí), 子元素會(huì)被截?cái)? 但不會(huì)有滾動(dòng)條.
總結(jié)
水平居中較為簡單, 共提供了8種方法, 一般情況下 text-align:center,marin:0 auto; 足矣
① text-align:center;
② margin:0 auto;
③ width:fit-content;
④ flex
⑤ 盒模型
⑥ transform
⑦ ⑧ 兩種不同的絕對(duì)定位方法
垂直居中, 共提供了8種方法.
① 單行文本, line-height
② 行內(nèi)塊級(jí)元素, 使用 display: inline-block, vertical-align: middle; 加上偽元素輔助實(shí)現(xiàn)
③ vertical-align
④ flex
⑤ 盒模型
⑥ transform
⑦ ⑧ 兩種不同的絕對(duì)定位方法
我們發(fā)現(xiàn), flex, 盒模型, transform, 絕對(duì)定位, 這幾種方法同時(shí)適用于水平居中和垂直居中.
希望對(duì)大家有所幫助.
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/116942.html
摘要:高度模型淺識(shí)為的簡寫,簡稱為塊級(jí)格式化上下文,為瀏覽器渲染某一區(qū)域的機(jī)制,中只有和中還增加了和。并非所有的布局都會(huì)在開發(fā)中使用,但是其中也會(huì)涉及一些知識(shí)點(diǎn)。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問題:怎樣通過 CSS 簡單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候,看到 float 屬性不...
摘要:劃重點(diǎn),這是一道面試必考題,很多面試官都喜歡問這個(gè)問題,我就被問過好幾次了要實(shí)現(xiàn)上圖的效果看似很簡單,實(shí)則暗藏玄機(jī),本文總結(jié)了一下實(shí)現(xiàn)水平垂直居中的方式大概有下面這些,本文將逐一介紹一下,我將本文整理成了一個(gè)倉庫,歡迎大家僅居中元素定寬高適 劃重點(diǎn),這是一道面試必考題,很多面試官都喜歡問這個(gè)問題,我就被問過好幾次了 showImg(https://segmentfault.com/im...
摘要:劃重點(diǎn),這是一道面試必考題,很多面試官都喜歡問這個(gè)問題,我就被問過好幾次了要實(shí)現(xiàn)上圖的效果看似很簡單,實(shí)則暗藏玄機(jī),本文總結(jié)了一下實(shí)現(xiàn)水平垂直居中的方式大概有下面這些,本文將逐一介紹一下,我將本文整理成了一個(gè)倉庫,歡迎大家僅居中元素定寬高適 劃重點(diǎn),這是一道面試必考題,很多面試官都喜歡問這個(gè)問題,我就被問過好幾次了 showImg(https://segmentfault.com/im...
閱讀 3074·2021-11-19 09:40
閱讀 1559·2021-11-15 11:39
閱讀 661·2021-10-08 10:05
閱讀 2272·2021-09-03 10:29
閱讀 3406·2021-08-12 13:22
閱讀 2151·2019-08-30 15:54
閱讀 3706·2019-08-30 14:03
閱讀 2654·2019-08-30 13:45