一、居中1． 居中对齐元素
将块元素水平居中对齐（像 ＜div＞） ， 使用 margin： auto；
设置元素的宽度将阻止它伸展到容器的边缘。
然后元素将占用指定的宽度，剩下的空间将平分在两个边距之间：
这个div是居中的。
．center ｛ margin： auto； width： 50％； border： 3px solid green； padding： 10px；｝
注意：如果没有设置宽度属性，则居中对齐没有效果 （或者设置到100％）．
2． 居中对齐文本
将元素内部的文本居中， 使用text－align： center；
这些文本是居中的。
．center ｛ text－align： center； border： 3px solid green；｝
3． 居中图片
居中图片， 使用 margin： auto； 并且设置为块级元素：
img ｛ display： block； margin： auto； width： 40％；｝
二、左右
HTML代码：
＜html lang＝＂en＂＞＜head＞ ＜meta charset＝＂UTF－8＂＞ ＜title＞编程字典＜／title＞
＜／head＞＜body＞
＜h2＞右对齐＜／h2＞ ＜p＞如何正确定位元素与位置属性的一个例子：＜／p＞
＜div class＝＂right＂＞ ＜p＞在我年轻而脆弱的岁月里，父亲给了我一些我一直以来一直在思考的建议．＜／p＞ ＜／div＞
＜／body＞＜／html＞
1． 左右对齐 － 使用 position
对齐元素的一种方法是使用 position： absolute；
在我年轻而脆弱的岁月里，父亲给了我一些我一直以来一直在思考的建议。
．right ｛ position： absolute； right： 0px； width： 300px； border： 3px solid ＃73AD21； padding： 10px；｝
注意：
绝对定位元素从正常流中移除，并且可以重叠元素。
当使用 position对齐元素时， 总是定义 margin 和 padding 为 ＜body＞ 元素． 这是为了避免不同浏览器的视觉差异。
还有IE8和早期版本有一些问题， 当使用 position． 如果容器元素有一个指定的宽度 （例如：＜div class＝＂container＂＞） ， 并且没有设置！DOCTYPE， IE8 和早期版本将添加 17px 外边距到右边． 这似乎是一条为滚动条预留空间． 因此，总是声明 ！DOCTYPE 当使用 position时：
body ｛ margin： 0； padding： 0；｝
．container ｛ position： relative； width： 100％；｝
．right ｛ position： absolute； right： 0px； width： 300px； background－color： ＃b0e0e6；｝
2． 左右对齐 － 使用 float
对齐元素的另一种方法是使用 float 属性：
．right ｛ float： right； width： 300px； border： 3px solid ＃73AD21； padding： 10px；｝
提示：
当将元素使用浮动对齐时，总是为body元素定义边距和填充。这是为了避免不同浏览器的视觉差异。
body ｛ margin： 0； padding： 0；｝
．right ｛ float： right； width： 300px； background－color： ＃b0e0e6；｝
效果图：
三、垂直居中，水平居中
HTML代码：
＜html lang＝＂en＂＞＜head＞ ＜meta charset＝＂UTF－8＂＞ ＜title＞编程字典＜／title＞
＜／head＞＜body＞
＜h2＞居中＜／h2＞ ＜p＞在这个实例中， 我们使用定位和transform属性实现元素的水平和垂直居中：＜／p＞
＜div class＝＂center＂＞ ＜！－－ ＜p＞我是垂直居中的．＜／p＞ －－＞ ＜p＞我水平垂直居中．＜／p＞ ＜／div＞
＜p＞注意： transform属性不支持IE8和更早的版本．＜／p＞
＜／body＞＜／html＞
1． 使用 padding
有许多方法来中心垂直CSS元素． 一个简单的解决方案是使用顶部和底部 padding：
．center ｛ padding： 70px 0； border： 3px solid green；｝
水平和垂直居中， 使用 padding 和 text－align： center：
垂直居中
．center ｛ padding： 70px 0； border： 3px solid green； text－align： center；｝
2． 使用 line－height
另一个技巧是使用 line－height 属性值等于 height 属性值．
．center ｛ line－height： 200px； height： 200px； border： 3px solid green； text－align： center；｝
If the text has multiple lines， add the following： ．center p ｛ line－height： 1．5； display： inline－block； vertical－align： middle；｝3． 使用 position ＆ transform
如果padding和line－height不可选，第三种解决方案是使用定位和变换属性：
．center ｛ height： 200px； position： relative； border： 3px solid green；｝
．center p ｛ margin： 0； position： absolute； top： 50％； left： 50％； transform： translate（－50％， －50％）；｝
四、总结
本文基于Html基础，主要介绍了Html中对齐的方式，对于对齐中的标签做了详细的讲解，用丰富的案例 ，代码效果图的展示，帮助大家更好理解 。
最后，希望可以帮助大家更好的学习CSS3。
