標籤：middle als 網格 測試 代碼 vertica 有一個 flex parent
首先將頁面劃分為大的結構性地區，比如容器、頁首、內容區和頁尾；
然後是內容地區本市，建立網格結構，分析頁面結構
最後再各內容區中設計結構，確定頁面配置。
1. 水平置中
使用display：inline 和 text-align
/*.parent { text-align: center; } .child { display: inline-block; }*/
使用margin:0 auto 設定
.child { width: 300px; margin: 0 auto; }
使用table實現
.child{display: table; margin: 0 auto;}
使用絕對位置
.parent{position:relative;}.child{position:absolute; left:50%; transform:translate(-50%);}
使用flex布局
/*第一種方法*/.parent{display:flex; justify-content:center;}/*第二種方法*/.parent{display:flex;}.child{margin:0 auto;}
html代碼：
<body> <div class=‘parent‘> <div id=‘child‘ class="child"> <p> 測試。。 測試。。111</p> </div> </div></body>
2.垂直置中
vertical -align
只有一個元素屬於inline或是inline-block（table-cell也可以理解為inline-block水平）水平，其身上的vertical-align屬性才會起作用。
使用vertical-align的時候，由於對齊的基準是用行高的基準作為標記需要設定line-height或設定display:table-cell.
/*1*/.parent{display:table-cell;vertical-align:middle;height:20px;}/*2*/.parent{display:inline-block;vertical-align:middle;line-height:20px;}
絕對位置
.parent{position:relative;}.child{positon:absolute; top:50%; transform:translate(0,-50%);}
flex實現
.parent{display:flex; align-items:center;}
3.水平垂直置中
vertical-align text-aling inline-block
.parent{display:table-cell; vertical-align:middle; text-align:center;}.child{display:inline-block;}
絕對位置
.parent{position:relative;}.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
flex實現
.parent{display:flex;justify-content:center;align-items:center;}
以上只是單列布局。
HTML CSS常見布局
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
