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