# 專題：居中和對齊
[TOC]
我們在學習中經常會遇到需要水平居中、垂直居中、對齊元素的場景，而居中和對齊又有很多方法和前提條件，本節我們來整理一下。
## 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>
```
