CSS对齐

居中对齐元素

将块元素水平居中对齐(像 <div>), 使用 margin: auto;

设置元素的宽度将阻止它伸展到容器的边缘。

然后元素将占用指定的宽度，剩下的空间将平分在两个边距之间：

这个div是居中的.

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

让我试试

注意：如果没有设置宽度属性，则居中对齐没有效果 (或者设置到100%).

居中对齐文本

将元素内部的文本居中, 使用text-align: center;

这些文本是居中的.

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

让我试试

提示：更多的例子如何对齐文本，看CSS文本章节.

居中图片

居中图片, 使用 margin: auto; 并且设置为块级元素:

Paris

img {
    display: block;
    margin: auto;
    width: 40%;
}

让我试试

左右对齐 - 使用 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;
}

让我试试

左右对齐 - 使用 float

对齐元素的另一种方法是使用 float 属性:

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

让我试试

提示：当将元素使用浮动对齐时，总是为body元素定义边距和填充。这是为了避免不同浏览器的视觉差异。

还有IE8和早期版本有一些问题, 当使用 float. 如果容器元素有一个指定的宽度 , 并且没有设置!DOCTYPE, IE8 和早期版本将添加 17px 外边距到右边. 这似乎是一条为滚动条预留空间. 因此，总是声明 !DOCTYPE 当使用 float时:

body {
    margin: 0;
    padding: 0;
}

.right {
    float: right;
    width: 300px;
    background-color: #b0e0e6;
}

让我试试

垂直居中 - 使用 padding

有许多方法来中心垂直CSS元素. 一个简单的解决方案是使用顶部和底部 padding:

I am vertically centered.

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

让我试试

水平和垂直居中, 使用 padding 和 text-align: center:

我水平和垂直居中.

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

让我试试

垂直居中 - 使用 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;
}

让我试试

垂直居中 - 使用 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%);
}

让我试试