专题：居中和对齐 · UI104班随堂笔记

## 专题：居中和对齐我们在学习中经常会遇到需要水平居中、垂直居中、对齐元素的场景，而居中和对齐又有很多方法和前提条件，本节我们来整理一下。 ### 1.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%，是没有效果的。 ### 2.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> ``` ### 3.float属性设置左右对齐 ```html <style> .right1{ float: right; width: 300px; border: 3px solid purple; padding: 10px; } </head> <body> <div class="right1"> <p>我是浮动右对齐的区块</p> </div> </body> </html> ``` ### 4.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> ``` ### 5.line-height属性设置水平垂直居中 ```html <style> .lineCenter{ line-height:300px; border: 3px solid #33ff33 ; height: 300px; } </style> <body> <div class="lineCenter"> <p>我是利用行高进行水平居中的元素</p> </div> </body> </html> ``` ### 6.绝对定位和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> ```