CSS 布局中，我们可以设置元素的水平和垂直对齐方式，例如垂直和水平居中对齐文本或水平居中图像

设置元素的水平和垂直对齐方式有以下几种：

使用 margin 属性水平居中某个元素

范例

块 ( block ) 元素会独占一行，同时还可以指定其宽度和高度

为了使块元素水平居中，首先指定元素的宽度，以防止元素溢出父容器，然后将 margin-left 和margin-right 属性值设置为 auto，以便元素的两边的边距是相等的

例如上面的范例的源代码如下

.center {
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

注意： 如果元素的宽度是 100%，那么它将无法居中，其实已经是居中的，100% 边距为 0 不就是居中么？

注意：在早期的 IE8 或更早的浏览器中，需要设置 <!DOCTYPE> 才能是元素居中

使用 text-align 属性居中文本或图像

我们可以使用 text-align 属性设置文本或图像左对齐、居中对齐、右对齐元素，就像下面这样

.left {
    text-align: left;
    border: 3px solid green;
}
.right {
    text-align: right;
    border: 3px solid green;
}
.center {
    text-align: center;
    border: 3px solid green;
}

如果使用 display:block 属性将图像设置为块级别，那么再使用 text-align 属性设置是无效的，这种情况下，我们只能将图像放置在另一个块级别的元素中，然后设置该元素的 margin-left 和 margin-right 属性为 auto 才能达到居中的目的

img {
    display: block;
    margin: 0 auto;
    width: 50%;
}

使用 padding 属性垂直居中

有多种方法可以让一个元素垂直居中，最简单的方式是设置该元素的父元素的 padding 属性，例如

.center {
    padding: 80px 0;
    border: 3px solid green;
}

如果想要一个元素水平居中和垂直居中，那么可以同时设置父元素的 text-align 和 padding 属性

.center {
    padding: 80px 0;
    border: 3px solid green;
    text-align: center;
}

使用 line-height 属性垂直居中

除了使用 padding 属性垂直居中外，还可以使用 line-height 属性来垂直居中某个元素

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

/* 如果文本跨越多行，可以添加以下属性来垂直居中 */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

在这种情况下，我们必须设置 height 属性，且 height 属性的值必须和 line-height 相等或者大于或小于 1px