專題：居中和對齊 · Web前端(打印用)

## 專題：居中和對齊我們在學習中經常會遇到需要水平居中、垂直居中、對齊元素的場景，而居中和對齊又有很多方法和前提條件，本節我們來整理一下。 ### margin設置區塊元素水平居中 margin:0 auto;設置左右外邊距的大小，控制元素的水平居中。 ```html <style> .center{ margin: 20px auto; width: 600px; border: 3px solid green; text-align: center; } </style> <body> <div class="center"> <p>使用margin進行元素的居中</p> </div> </body> ``` 注：width不能設置為100%，是沒有效果的。 ### position屬性設置元素的左右對齊 ```html <style> .right{ position: absolute; right: 0; width: 300px; border: 3px solid pink; padding: 10px; z-index: 0; } <style> <body> <div class="right"> <p>我是右對齊的區塊</p> </div> </body> </html> ``` ### float屬性設置左右對齊 ```html <sty> .right1{ float: right; width: 300px; border: 3px solid purple; padding: 10px; } </head> <body> <div class="right1"> <p>我是浮動右對齊的區塊</p> </div> </body> </html> ``` ### padding屬性設置水平垂直居中 ```html <style> .padCenter{ padding: 70px 0; border: 3px dotted yellow; text-align: center; } </style> <body> <div class="padCenter"> <p>我是用padding垂直居中的元素</p> </div> </body> </html> ``` ### line-height屬性設置水平垂直居中 ```html <style> .lineCenter{ line-height:300px; border: 3px solid #33ff33 ; height: 300px; } </style> <body> <div class="lineCenter"> <p>我是利用行高進行水平居中的元素</p> </div> </body> </html> ``` ### 絕對定位和transform屬性設置水平垂直居中 ```html <style> .poCenter{ border: 3px solid #ff88c2; height: 200px; position: relative; } .poCenter p{ position: absolute; top: 50%; left: 50%; /*對水平垂直居中進行修正*/ transform:translate(-50%,-50%); } </style> <body> <div class="poCenter"> <p>我是利用絕對定位進行水平垂直居中的元素</p> </div> </body> </html> ```