初學HTML5－－盒子模型
阿新 • • 發佈：2019-01-02
所有的標籤水平居中: 行內標籤和塊級-行內標籤:在父標籤中設定 text-align: center; 塊級標籤:在自身設定 margin:0 auto; left: 50%; top: 50%; transform: translate(-50%, -50%); 所有的標籤垂直居中: 行內標籤和塊級-行內標籤:在父標籤中設定line-height: 300px; 塊級標籤:position: absolute;
程式碼演示：
<html lang="en"> <head> <meta charset="UTF-8"> <title>標籤的居中(水平居中以及垂直居中)</title> <style> #main { /*設定id為main的標籤寬*/ width: 500px; /*設定id為main的標籤高*/ height: 300px; /*設定id為main的標籤背景顏色*/ background-color: antiquewhite; /*設定內容水平居中作用於文字,不能用於塊級標籤*/ text-align: center; /*垂直居中*/ line-height: 300px; /*1.塊級標籤垂直居中第一步:*/ position: relative; } span { /*設定span標籤的背景顏色*/ background-color: deeppink; } .kuai{ /*設定類別為kuai的標籤*/ background-color: aquamarine; width: 200px; height: 50px; /*塊級標籤垂直居中前提,覆蓋塊級標籤高度*/ line-height: 50px; margin: auto; /*2.塊級標籤垂直居中第二步*/ position: absolute; /*3.塊級標籤垂直居中第三步,以父標籤的寬度取50%*/ left: 50%; top: 50%; /*4.塊級標籤垂直居中第四步,平移*/ transform: translate(-50%, -50%); } input{ /*修改內邊距正常是向外擴張,內容的尺寸不變*/ width:500px; padding-left: 10px; /*修改內邊距向內擴張*/ box-sizing: border-box; } </style> </head> <body> <div id="main"> <!--行內標籤居中--> <!--<span>行內標籤要居中</span>--> <!--行內塊級標籤居中--> <!--<button>行內塊級標籤要居中</button>--> <!--塊級標籤居中--> <div class="kuai">塊級標籤要居中</div> </div> <p></p> <input> </body> </html>