# 专题：居中和对齐
[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>
```
