---

margin:auto

以前说过的，如果想是让一个块级元素（block）在水平方向上居中，可以使用margin:auto来搞定这事情。如下例所示：

.center {
    margin: auto;
    width: 50%;
    border: 3px solid #46acb6;
    padding: 10px;
}

运行一下

---

提示：1.margin:auto要用在block类型元素，比如div元素；2.该元素必须设置特定的宽度。

---

text-align:center 文本居中

如果想使一段文本居中对齐，那就使用text-align:center即可。

.center {
    text-align: center;
    border: 3px solid #46acb6;
    padding: 10px;
}

运行一下

---

使一张图片居中

是一张图片在block元素中居中对齐的方式就是把这张图片设置上display:block;，然后套用margin:auto的方法就ok了~

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
}

运行一下

---

通过position属性实现左右对齐

通过position属性也可以实现元素的左对齐和右对齐。对目标元素设置position: absolute;即可，但是这种方式会使该元素脱离正常的页面元素排布序列，而覆盖其他元素，因此除非特殊需求，一般不推荐这种方式。如下所示：

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #46acb6;
    padding: 10px;
}

运行一下

---

通过float属性实现左右对齐

通过float属性也可以实现元素的左对齐和右对齐。

.right {
    float: right;
    width: 300px;
    border: 3px solid #46acb6;
    padding: 10px;
}

运行一下

---

垂直方向上的居中 - 使用padding内边距

水平方向上的文本居中可以使用text-align属性搞定，而垂直方向上，这里可以用padding来实现一下。（其实用padding只是看上去居中，因为这里的外容器的高度不是限定的，所以用padding并不典型，后面会有其他的方式）

.center {
    padding: 70px 0;
    border: 3px solid #46acb6;
    text-align: center;
}

运行一下

垂直方向上的居中 - 使用line-height行高

如果外部容器元素的高度是一个确定的数值单位，则这时使用line-height属性是更明智的选择。使外部元素的line-height属性等于height属性的值即可。

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid #46acb6;
    text-align: center;
}

/* 如果段落不只一行，下面的设置就起作用了 */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

运行一下

垂直方向上的居中 - 使用position和transform

当padding和line-height的方法都不适用的时候，可用如下第三种方式来实现，即使用position和transform属性。

.center { 
    height: 200px;
    position: relative;
    border: 3px solid #46acb6; 
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

运行一下

---

奉天承运，关于transform属性，后续会深入学习。