前端三剑客
CSS

CSS 布局对齐汇总

# CSS 布局对齐汇总

# 1. 块级元素水平居中

方法: margin: auto;
描述:
- 将元素的 margin 设置为 auto 可以在水平上将元素居中。前提是元素有明确的宽度（非 100%）。在这种情况下，浏览器会自动计算左右外边距，将其分配成相等的值，从而使元素水平居中。【设置在自己身上】

常见的块级元素：<div>、<p>、<h1> - <h6>、<ul>、<ol>、<li>、<form>、<table>、<header>、<footer>、<section>。

<style>
.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>

<div class="center">
  <p><b>注意: </b>使用 margin:auto 无法兼容 IE8, 除非 !DOCTYPE 已经声明。</p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

注意: 这种方法仅水平居中，不影响垂直位置。

建议使用flex布局设置块级元素对齐方式

不需要设置宽度：不像 margin: auto; 需要明确的宽度，flex布局 不要求固定宽度即可实现居中。

# 2. 行内元素水平居中

方法: text-align: center;
text-align: center; 用于块级元素内的所有行内和行内块级元素的水平居中对齐。设置在块级父元素上，以控制其子元素的对齐方式。

常见的行内和行内块级元素

行内元素: span, a, strong, em, b, i, u
行内块级元素: img, input, button, label

<style>
.center {
    text-align: center;
    border: 3px solid green;
}
</style>

<div class="center">
  <p>文本居中对齐。</p>
</div>

1
2
3
4
5
6
7
8
9
10

注意: 这种方法仅影响水平居中，对垂直位置无影响。

# 3. 图片水平居中

# 方案一: `text-align: center;`

行内元素的居中：text-align: center; 用于将块级容器中的行内元素或行内块元素（如文本、<img>、<span>）居中。
适用于图片在一个块级父元素内，并且图片本身是行内块元素（<img> 默认是行内块元素）。

示例代码:

<style>
.text-center {
    text-align: center;
    border: 1px solid green;
}
</style>

<div class="text-center">
  <img src="image.jpg" alt="Example" style="width: 50%;">
</div>

1
2
3
4
5
6
7
8
9
10

限制

图片必须在一个块级父元素内，这个父元素设置 text-align: center;。

# 方案二：`display: block;` 和 `margin: 0 auto;`

块级元素的居中：将图片设置为块级元素以使其能够使用 margin: auto; 实现居中。
适用于需要将图片独立作为一个块级元素时，尤其是当你需要不依赖于父元素的 text-align 属性来控制图片居中。

示例代码:

<style>
img {
    display: block;
    margin: 0 auto;
}
</style>

<img src="image.jpg" alt="Example" style="width: 50%;">

1
2
3
4
5
6
7
8

作用

水平居中：通过将 margin 设置为 auto 来自动分配左右边距，使图片水平居中。
适应性更强：不依赖父元素的 text-align，直接控制图片自身的布局行为。

优势

图片不需要在父元素内，margin: auto; 可以独立生效。
不影响父元素的其他行内元素的对齐方式。

# 两种方案总结

text-align: center;：适用于行内元素居中，必须在父容器上设置，并且适用于图片在文本或其他行内元素中的场景。其效果是居中对齐容器内的所有行内元素和行内块级元素。
display: block; 和 margin: 0 auto;：适用于块级元素居中，图片本身被设置为块级元素，因此不依赖于父容器的 text-align，而是通过调整自身 margin 来控制位置。这种方式更独立，不影响其他元素的布局。

# 4. 同时水平和垂直居中

要同时实现水平和垂直居中，通常需要使用 flexbox 或 grid 布局，因为它们提供了更加灵活的对齐方式。

# 使用 `flexbox` 实现水平和垂直居中

方法: display: flex;, justify-content: center;, align-items: center;
描述:
- 将父容器设置为 flex 布局，使用 justify-content: center; 实现水平居中，使用 align-items: center; 实现垂直居中。

示例代码:

<style>
.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px; /* 必须指定高度 */
    border: 1px solid #000;
}
</style>

<div class="flex-container">
  <div>居中元素</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

水平和垂直: 同时居中。

# 使用 `grid` 实现水平和垂直居中

方法: display: grid;, place-items: center;
描述:
- 将父容器设置为 grid 布局，使用 place-items: center; 同时实现水平和垂直居中。

示例代码:

<style>
.grid-container {
    display: grid;
    place-items: center;
    height: 200px; /* 必须指定高度 */
    border: 1px solid #000;
}
</style>

<div class="grid-container">
  <div>居中元素</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

水平和垂直: 同时居中。

总结

水平居中：margin: auto; 和 text-align: center; 是常用的方法，分别适用于块级元素和行内元素。
垂直居中：需要使用 flexbox 或 grid 布局中的 align-items: center; 或 place-items: center;。
同时水平和垂直居中：最佳方案是使用 flexbox 或 grid 布局。

如果你希望一个元素在整个窗口内居中显示，并且使用 flexbox 实现垂直居中，那么父容器的高度必须设置为视口高度（100vh），否则 align-items: center; 将不起作用。这是因为 flexbox 的垂直居中是基于父容器的高度来计算的。

# 5. 为什么需要设置父容器高度为视口高度？

当你希望一个元素在窗口中垂直居中时，flexbox 需要一个明确的高度来计算居中的位置。如果父容器的高度不明确（比如内容高度小于视口高度），align-items: center; 将无法工作，因为它不知道应该如何进行垂直居中。

以下是一个没有设置父容器高度的例子，垂直居中将无效：

<div class="container">
  <form class="form">
    <!-- 表单内容 -->
  </form>
</div>

<style>
.container {
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;       /* 垂直居中，但无效 */
  /* 没有设置高度，默认高度为内容高度 */
}

.form {
  /* 你可以在这里添加表单的其他样式 */
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

为了实现窗口内的垂直居中，你需要将父容器的高度设置为视口高度（100vh）：

<div class="container">
  <form class="form">
    <!-- 表单内容 -->
  </form>
</div>

<style>
.container {
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;       /* 垂直居中 */
  height: 100vh;             /* 设置父容器高度为视口高度 */
}

.form {
  /* 你可以在这里添加表单的其他样式 */
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

总结

height: 100vh：确保父容器占满整个窗口，这样 flexbox 的垂直居中功能才能正常工作。
如果父容器的高度是自动计算或小于视口高度，那么 align-items: center; 将无法实现预期的效果。

# 6. 左右对齐 - 使用定位方式

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

<!DOCTYPE html>
<html>
<head>
<style>
.right {
    position: absolute; /* 设置绝对定位 */
    right: 0px; /* 设置右侧对齐 */
    width: 300px; /* 设置宽度 */
    border: 3px solid #73AD21; /* 设置边框 */
    padding: 10px; /* 设置内边距 */
}
</style>
</head>
<body>

<h2>右对齐</h2>
<p>以下实例演示了如何使用 position 来实现右对齐:</p>

<div class="right">
  <p>菜鸟教程 -- 学的不仅是技术，更是梦想！！</p>
</div>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

提示

原理：通过设置元素的 position 属性为 absolute，并使用 right: 0 或 left: 0，将元素固定在父容器的右边或左边。
需要注意的是，父容器需要设置 position: relative，否则元素将相对于窗口定位。

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

当使用 position 属性时，IE8 以及更早的版本存在一个问题。如果容器元素（在我们的案例中是 <div class="container">）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时，请始终设置 !DOCTYPE 声明：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
body {
    margin: 0;
    padding: 0;
}
 
.container {
    position: relative; /* 设置相对定位 */
    width: 100%; /* 设置宽度 */
}
 
.right {
    position: absolute; /* 设置绝对定位 */
    right: 0px; /* 设置右侧对齐 */
    width: 300px; /* 设置宽度 */
    background-color: #b0e0e6; /* 设置背景颜色 */
}
</style>
</head>
<body>
<div class="container">
    <div class="right">
        <p><b>注意: </b>当使用浮动属性对齐,总是包括 !DOCTYPE 声明!如果丢失,它将会在 IE 浏览器产生奇怪的结果。</p>
    </div>
</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 7. 左右对齐 - 使用 float 方式

我们也可以使用 float 属性来对齐元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.right {
    float: right; /* 设置右浮动 */
    width: 300px; /* 设置宽度 */
    border: 3px solid #73AD21; /* 设置边框 */
    padding: 10px; /* 设置内边距 */
}
</style>
</head>
<body>

<h2>右对齐</h2>
<p>以下实例演示了使用 float 属性来实现右对齐:</p>

<div class="right">
  <p>我老爹在小时候给我的一些人生建议，我现在还记忆深刻。</p>
</div>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

当像这样对齐元素时，对 <body> 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。

注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 "clearfix(清除浮动)" 来解决该问题。

我们可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
div {
    border: 3px solid #4CAF50; /* 设置边框 */
    padding: 5px; /* 设置内边距 */
}

.img1 {
    float: right; /* 设置右浮动 */
}

.clearfix {
    overflow: auto; /* 设置自动溢出处理 */
}

.img2 {
    float: right; /* 设置右浮动 */
}
</style>
</head>
<body>

<p>以下实例图在父元素中溢出，很不美观:</p>

<div>
    <img class="img1" src="https://web-183.oss-cn-beijing.aliyuncs.com/typora/202407170254947.webp" alt="Pineapple" width="170" height="170">
    菜鸟教程 - 学的不仅是技术，更是梦想！！！
</div>

<p style="clear:right">在父元素上通过添加 clearfix 类，并设置 overflow: auto; 来解决该问题:</p>

<div class="clearfix">
    <img class="img2" src="https://web-183.oss-cn-beijing.aliyuncs.com/typora/202407170254947.webp" alt="Pineapple" width="170" height="170">
    菜鸟教程 - 学的不仅是技术，更是梦想！！！
</div>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

当使用 float 属性时，IE8 以及更早的版本存在一个问题。如果省略 !DOCTYPE 声明，那么

IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 float 属性时，请始终设置 !DOCTYPE 声明：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
body {
    margin: 0; /* 设置外边距为0 */
    padding: 0; /* 设置内边距为0 */
}
 
.right {
    float: right; /* 设置右浮动 */
    width: 300px; /* 设置宽度 */
    background-color: #b0e0e6; /* 设置背景颜色 */
}
</style>
</head>
<body>
<div class="right">
<p><b>注意: </b>当使用浮动属性对齐,总是包括 !DOCTYPE 声明!如果丢失,它将会在 IE 浏览器产生奇怪的结果。</p>
</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 8. 垂直居中对齐 - 使用 padding

CSS 中有很多方式可以实现垂直居中对齐。一个简单的方式就是使用 padding:

提示

原理：通过设置元素的上下内边距，将内容在垂直方向上居中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.center {
    padding: 70px 0; /* 设置上下内边距 */
    border: 3px solid green; /* 设置边框 */
}
</style>
</head>
<body>

<h2>垂直居中</h2>
<p>以上实例，我们使用 padding 属性实现元素的垂直居中：</p>

<div class="center">
  <p>我是垂直居中的。</p>
</div>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

如果要水平和垂直都居中，可以使用 padding 和 text-align: center:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.center {
    padding: 70px 0; /* 设置上下内边距 */
    border: 3px solid green; /* 设置边框 */
    text-align: center; /* 设置文本居中对齐 */
}
</style>
</head>
<body>

<h2>Centering</h2>
<p>以下实例，我们使用 padding 和 text-align 让 div 元素的水平和垂直方向都居中:</p>

<div class="center">
  <p>我是水平和垂直都居中的。</p>
</div>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 9. 垂直居中 - 使用 line-height

使用 line-height 属性可以实现单行文本的垂直居中：

提示

原理：通过设置元素的行高与高度相等，使单行文本在垂直方向上居中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.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; /* 设置垂直对齐 */
}
</style>
</head>
<body>

<h2>居中</h2>
<p>以下实例中，我们让 line-height 属性值和 height 属性值相等来设置 div 元素居中：</p>

<div class="center">
  <p>我是垂直居中的。</p>
</div>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 10. 垂直居中 - 使用 position 和 transform

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

提示

原理：通过设置元素的 position 属性为 absolute，并使用 transform: translate(-50%, -50%)，将元素在垂直和水平方向上居中。

这种方法适用于任何类型的内容，无论是文本还是图像，都可以实现精确的垂直和水平居中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.center { 
    height: 200px; /* 设置高度 */
    position: relative; /* 设置相对定位 */
    border: 3px solid green; /* 设置边框 */
}

.center p {
    margin: 0; /* 设置外边距为0 */
    position: absolute; /* 设置绝对定位 */
    top: 50%; /* 设置垂直居中 */
    left: 50%; /* 设置水平居中 */
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    transform: translate(-50%, -50%); /* 标准语法 */
}
</style>
</head>
<body>

<h2>居中</h2>
<p>以下实例中，我们使用了 positioning 和 transform 属性来设置水平和垂直居中：</p>

<div class="center">
  <p>我是水平和垂直居中的。</p>
</div>

<p>注意: IE8 及更早版本不支持 transform 属性。</p>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# 11. 行内元素（Inline Elements）

定义: 行内元素只占据其定义的内容空间，不会独占一行。

特点

不会在其前后自动换行。
可以与其他行内元素和文本内容混合在同一行中。
高度、宽度、上下外边距和内边距不会影响其他元素的布局（上下外边距对布局没有影响）。
默认情况下，不能设置宽度和高度（width 和 height 属性无效）。
主要用于包裹文本内容和其他行内元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内元素示例</title>
    <style>
        .inline {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <p>这是一个段落，其中包含了几个 <span class="inline">行内元素</span> 和 <span class="inline">更多行内元素</span>。</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 常见的行内元素

<a>：超链接
<em>：强调文本
<strong>：加重强调文本
<span>：通用行内容器

# 12. 行内块级元素（Inline-Block Elements）

定义: 行内块级元素结合了行内元素和块级元素的特点。

特点

不会在其前后自动换行。
可以与其他行内块级元素和文本内容混合在同一行中。
可以设置宽度和高度（width 和 height 属性有效）。
上下外边距和内边距对布局有影响。
主要用于需要块级元素特性但不想独占一行的情况。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内块级元素示例</title>
    <style>
        .inline-block {
            display: inline-block;
            width: 100px;
            height: 50px;
            background-color: lightgreen;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="inline-block">元素1</div>
    <div class="inline-block">元素2</div>
    <div class="inline-block">元素3</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 常见的行内块级元素

<img>：图像
<input>：输入框
<button>：按钮
<select>：下拉列表
<textarea>：多行文本输入框

# 13. 块级元素（Block Elements）

定义: 块级元素占据其父容器的整个可用宽度，并且总是从新行开始。

特点

独占一行，默认情况下在其前后有换行。
可以包含行内元素和其他块级元素。
宽度、高度、内边距和外边距对布局有影响。
默认宽度是容器的100%。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块级元素示例</title>
    <style>
        .block {
            background-color: lightcoral;
            margin: 10px 0;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="block">块级元素1</div>
    <div class="block">块级元素2</div>
    <div class="block">块级元素3</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 常见的块级元素

<div>：通用块级容器
<p>：段落
<h1> - <h6>：标题
<ul>：无序列表
<ol>：有序列表
<li>：列表项
<form>：表单
<table>：表格
<header>：头部
<footer>：底部
<section>：章节

总结

行内元素：用于包裹文本内容和其他行内元素，不会独占一行，不能设置宽度和高度。
行内块级元素：结合了行内元素和块级元素的特点，不会独占一行，但可以设置宽度和高度。
块级元素：独占一行，可以包含行内元素和其他块级元素，宽度、高度、内边距和外边距对布局有影响。

编辑此页

上次更新: 2025/01/29, 14:36:06

← CSS flex布局 CSS 实战技巧→

CSS 布局对齐汇总

# CSS 布局对齐汇总

# 1. 块级元素水平居中

# 2. 行内元素水平居中

# 3. 图片水平居中

# 方案一: text-align: center;

# 方案二：display: block; 和 margin: 0 auto;

# 两种方案总结

# 4. 同时水平和垂直居中

# 使用 flexbox 实现水平和垂直居中

# 使用 grid 实现水平和垂直居中

# 5. 为什么需要设置父容器高度为视口高度？

# 6. 左右对齐 - 使用定位方式

# 7. 左右对齐 - 使用 float 方式

# 8. 垂直居中对齐 - 使用 padding

# 9. 垂直居中 - 使用 line-height

# 10. 垂直居中 - 使用 position 和 transform

# 11. 行内元素（Inline Elements）

# 常见的行内元素

# 12. 行内块级元素（Inline-Block Elements）

# 常见的行内块级元素

# 13. 块级元素（Block Elements）

# 常见的块级元素

# 方案一: `text-align: center;`

# 方案二：`display: block;` 和 `margin: 0 auto;`

# 使用 `flexbox` 实现水平和垂直居中

# 使用 `grid` 实现水平和垂直居中