資訊專欄INFORMATION COLUMN
摘要：塊及元素水平方向居中原理兩側(cè)，則平分剩余空間，相當(dāng)于水平居中。代碼如下塊及元素水平居右原理一側(cè)，一側(cè)沒設(shè)置，則設(shè)置的一側(cè)分配所有剩余空。想讓居右顯示，已經(jīng)很簡單了。再設(shè)置垂直方向上下為，即可實現(xiàn)垂直居中。
首先了解下，margin的auto屬性的作用是用來分配剩余空間，所以對于有剩余空間的元素才有效哦（塊及元素）。比如圖片設(shè)置margin: 0 auto是無效的，因為圖片是內(nèi)聯(lián)元素，不是占一整行，沒有剩余空間。
1.塊及元素水平方向居中：
原理：兩側(cè)auto，則平分剩余空間，相當(dāng)于水平居中。
div { margin-right: auto;? margin-left: auto; width:200px;? height: 200px } 當(dāng)然也可以這樣寫 div { margin: 0 auto; width:200px;? height: 200px }? 跟垂直方向無關(guān)，垂直方向可隨便設(shè)置，只要水平左右都設(shè)置為auto即可。注意width寬度一定要設(shè)置，沒有寬度的塊默認(rèn)就是100%，就沒有auto值了。
代碼如下：
2.塊及元素水平居右：
原理：一側(cè)auto，一側(cè)沒設(shè)置，則設(shè)置auto的一側(cè)分配所有剩余空。
想讓div居右顯示，已經(jīng)很簡單了。把margin-left 的值設(shè)置為auto 即可。代碼如下：
div { width:200px; height: 200px; margin-left: auto;}
原理：一側(cè)定值,一側(cè)auto,auto為剩余空間大小。代碼如下：
div { width:200px; height: 200px; margin-left: auto; margn-right: 100px; }
以上方法只能實現(xiàn)水平方向，對于垂直方向是無效的，因為垂直方向沒有剩余空間，這點不再解釋了。
3.想要實現(xiàn)垂直方向的居中可以用絕對定位。
div? {
?? ??? ??? ??? ?background: #FF0000;
?? ??? ??? ??? ?width: 200px;
?? ??? ??? ??? ?height: 200px;
?? ??? ??? ??? ?position: absolute;
?? ??? ??? ??? ?top: 0;
?? ??? ??? ??? ?left: 0;
?? ??? ??? ??? ?right: 0;
?? ??? ??? ??? ?bottom: 0;
?? ??? ??? ??? ?margin: auto;
?? ??? ??? ?}
margin: auto;? 是關(guān)鍵，沒有設(shè)置此項，也不會水平垂直居中哦。
解釋下原理:
1.在普通內(nèi)容流中，margin:auto的效果等同于margin-top:0;margin-bottom:0。
2.position:absolute使絕對定位塊跳出了內(nèi)容流，內(nèi)容流中的其余部分渲染時絕對定位部分不進(jìn)行渲染。
3.為塊區(qū)域設(shè)置top: 0; left: 0; bottom: 0; right: 0;將給瀏覽器重新分配一個邊界框，此時該塊塊將填充其父元素的所有可用空間，所以margin 垂直方向上有了可分配的空間。
4.再設(shè)置margin 垂直方向上下為auto，即可實現(xiàn)垂直居中。（注意高度得設(shè)置）。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114697.html
摘要：水平居中行內(nèi)元素的水平居中在父元素中設(shè)置只對內(nèi)聯(lián)元素或行內(nèi)塊元素有效需要放置于父元素中塊級元素的水平居中只對塊級元素有效指的是自適應(yīng)寬度。參考張鑫旭實現(xiàn)絕對定位元素的居中及原理居中方式水平居中垂直居中塊級元素設(shè)置內(nèi)聯(lián)元素設(shè)置。 原文地址：https://www.xksblog.top/CSS-mainstream-centering-techniques.html 幾個月也零零散散學(xué)...
摘要：適用情景單對象水平居中原理將子元素設(shè)置塊級表格，再設(shè)置水平居中。結(jié)語有些是水平居中，有些是垂直居中，將它們某兩個合在一起就能實現(xiàn)水平和垂直均居中。 前言 css水平和垂直居中是一個亙古不變的話題，它常常出現(xiàn)在優(yōu)美的網(wǎng)頁上以及各大前端面試當(dāng)中。說來慚愧，在兩年前面試的時候，我完全不知道如何做到水平和垂直均居中的方法，那場面別提有多尷尬了（ps：特想找個地洞鉆進(jìn)去）。。。時隔兩年，對于這個...
閱讀 2879·2021-11-22 11:56
閱讀 3597·2021-11-15 11:39
閱讀 926·2021-09-24 09:48
閱讀 790·2021-08-17 10:14
閱讀 1368·2019-08-30 15:55
閱讀 2780·2019-08-30 15:55
閱讀 1343·2019-08-30 15:44
閱讀 2814·2019-08-30 10:59
