hello啊铁子们，今天来给大家浅谈一下css对齐方法与属性
在HTML里面写出的标签 盒子都是向左对齐，可是有时候我们想要让页面更加美观好看，那么我们可以试着改变一下HTML里面的对齐方式，以下介绍几种对齐方式
元素水平居中对齐
最常用的是margin属性，铁汁们都知道，margin属性有四个值 分别是上、右、下、左所以右三种margin方发可以实现元素水平居中对齐
1.margin-left：auto；margin-left：right：auto；
2.margin：auto；
3.margin：0 auto；
<style type="text/css">
.a{
width: 200px;
height: 200px;
background-color: orange;
}
.b{
width: 200px;
height: 200px;
background-color: green;
}
.c{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<body>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</body>分别给他们写上属性：
<style type="text/css">
.a{
width: 200px;
height: 200px;
background-color: orange;
margin-left: auto;
margin-right: auto;
}
.b{
width: 200px;
height: 200px;
background-color: green;
margin: auto;
}
.c{
width: 200px;
height: 200px;
background-color: blue;
margin: 0 auto;
}
</style>
<body>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</body>文本居中对齐
若只是想让文本居中对齐，则是可以使用text-align：center
<body>
<p style="text-align: center;">我要对齐啦</p>
</body>其中 text-align 还有right、left属性，而且可以直接在行内写出样式，更加的方便
imge 图片居中对齐：
我们知道图片是行内块元素，所以我们需要把图片转成块，但是同样是使用margin属性来对齐
<style type="text/css">
.imge{
display: block;
margin: auto;
}
</style>
<body>
<img class="imge" src="img/%5DIA5CSU%25L~57NY64MLGU9Q8.png" >
</body>左右对齐之定位方法
我们还可以使用position定位的方法来进行左右对齐，这个方法相对要繁琐点不是本推荐，但是还是得来介绍一下：
<style type="text/css">
.position{
position: absolute;
right: 0px;
width: 200px;
border: 2px solid orange;
padding: 20px;
}
</style>
<body>
<div class="position">
看我poistion定位方法
</div>
</body>在这边我们是选择了绝对定位absolute属性，意思是相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
在上面代码里可以发现改变盒子位置的right属性 随着right属性的增大，盒子向左偏移，想要获得准确的位置则是需要不断的调试
注意：当使用 position 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。
左右对齐之float对齐
采用浮动属性进行对齐也是一个不错的选则
<style type="text/css">
.right{
float: right;
width: 200px;
border: 2px solid orange;
padding: 20px;
}
</style>
<body>
<div class="right">
看我float定位方法
</div>
</body>