CSS 布局 - 水平 & 垂直对齐 - CSS 基础教程

CSS margin:auto 属性设置可以水平居中对齐一个元素

水平 & 垂直居中对齐

源码如下

<div style="text-align:center">
<div style="border:1px solid gray;padding:2px 14px;margin-left:auto;margin-right:auto;width:45%;background-color:#e5eecc;text-align:left;text-align:center">
<span>水平 & 垂直居中对齐</span>
</div>
</div>

设置到元素的宽度将防止它溢出到容器的边缘

元素通过指定宽度，并将两边的空外边距平均分配

div 元素是居中的

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

运行范例 »

注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用

文本居中对齐

CSS text-align: center 属性设置可以让文本在元素内居中对齐

文本居中对齐

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

运行范例 »

如果想查看更多文本对齐范例，可以访问我们的 CSS 文本

图片居中对齐

要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中

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

运行范例 »

左右对齐 - 使用定位方式

可以使用 position: absolute; 属性来对齐元素

简单教程，简单编程

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

运行范例 »

绝对定位元素会被从正常流中删除，并且能够交叠元素

当使用 position 来对齐元素时, 通常会将 <body> 元素会设置 margin 和 padding 这样可以避免在不同的浏览器中出现可见的差异

当使用 position 属性时，IE8 以及更早的版本存在一个问题

如果容器元素（在我们的案例中是 <div class="container"> ）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距

这似乎是为滚动条预留的空间

当使用 position 属性时，请始终设置 <!DOCTYPE html> 声明

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&t; 元素的外边距和内边距进行预定义是一个好主意

这样可以避免在不同的浏览器中出现可见的差异

当使用 float 属性时，IE8 以及更早的版本存在一个问题

如果省略 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距

这似乎是为滚动条预留的空间

当使用 float 属性时，请始终设置 <!DOCTYPE html> 声明

body {
    margin: 0;
    padding: 0;
}

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

运行范例 »

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

运行范例 »

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

运行范例 »

垂直居中 - 使用 position 和 transform

除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中

.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}

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

运行范例 »

想要了解更多 transform 属性内容，可以访问我们的 2D 翻转章节