如何設定水平居中顯示？
一般的方法是設定寬高，然后以margin去控制，比如：DIV居中的經典方法
本章介紹需要寬度自適應時如何水平居中，以及居中失效的幾個點
水平自適應居中
比如設定一個串列水平居中顯示
- AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
- BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
- CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
- DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
添加布局元素：
1 <div class="container"> 2 <div class="list-parentOuter"> 3 <div class="list-parentInner"> 4 <div class="item">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div> 5 <div class="item">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div> 6 <div class="item">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div> 7 <div class="item">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div> 8 </div> 9 </div> 10 </div>
水平居中設定：
- list-parentOuter設定float，將元素list-parentOuter浮動（這樣設定后，元素的寬度會自適應）
- list-parentOuter設定margin-left，以父容器的寬度*50，設定左側margin
- lsit-parentInner設定position相對位置，以滿足內容的100%填充list-parentOuter
- lsit-parentInner設定right，以父容器list-parentOuter的寬度*50，設定右側距離
1 .list-parentOuter { 2 float: left; 3 margin-left: 50%; 4 } 5 .list-parentInner { 6 position: relative; 7 right: 50%; 8 }
我們添加點背景顏色，效果如下：
如上圖，紅色框先往右移50%綠色框的寬度，然后左移50%藍色框的寬度，
完整html及css：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .container { 8 width:600px; 9 height:300px; 10 background: green; 11 } 12 .list-parentOuter { 13 float: left; 14 margin-left: 50%; 15 background: rgb(0, 0, 255,0.5); 16 } 17 .list-parentInner { 18 position: relative; 19 right: 50%; 20 background: rgb(255, 0, 0,0.5); 21 display: flex; 22 flex-direction: column; 23 } 24 </style> 25 26 </head> 27 <body> 28 <body> 29 <div class="container"> 30 <div class="list-parentOuter"> 31 <div class="list-parentInner"> 32 <div class="item">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div> 33 <div class="item">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div> 34 <div class="item">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div> 35 <div class="item">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div> 36 </div> 37 </div> 38 </div> 39 </body> 40 </body> 41 </html>View Code
注：以上水平居中的方案，會有一段右側區域（藍框部分）超出預定的寬度，可以在添加overflow:hidden隱藏溢位部分
水平居中錯誤操作及總結
在以上css中上方容器container的樣式，添加以下flex布局代碼：
1 .container { 2 width:600px; 3 height:300px; 4 display: flex; 5 flex-direction: column; 6 background: green; 7 }
里面的內容還能夠居中么？效果如下：
如果是寬度1000，則是這樣：
原因：
flex布局時，子元素不會再自適應寬度（即使設定了float=left）；
然后設定設定豎向布局方向，flex-direction: column，會將藍框的寬度截了（flex-direction: column，會將超出的寬度截取），
所以紅框去獲取父容器藍框的寬度時，只能獲取被截圖的寬度，
紅框在綠框內雖然元素是居中的，但是內容就不居中了，
所以如果需要內容居中，不要在藍框的上方容器內添加flex布局相關代碼，
總結
外層
- 外層的父容器，不能會截取外層寬度的代碼（比如flex豎向布局）
- 外層需要設定float=left或者positon=absolute，以讓外層的寬度自適應內層的寬度，
- 外層以其父容器的50%寬度，向右移動距離，方便后續居中設定
內層
- 內層的寬度，需要100%填充外層容器的，
- 通過設定相對位置，以外層50%寬度設定遠離外層右側，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/24964.html
標籤：Html/Css