让元素在网页上稳坐正中：css水平居中与垂直居中攻略

2023-11-14 13:44:10

我们每天浏览的网站上都有着千千万万的元素：文字、图片、按钮、菜单等等，所有这些元素需要各司其职，井然有序，完美地呈现在网站上。利用 CSS 的强大功能，你可以轻松实现任意元素的水平居中、垂直居中，乃至水平垂直居中，让网站布局美观大方，赏心悦目。

一、让元素水平居中：美观网页的基石

水平居中，顾名思义就是让元素在父元素内左右居中。举个简单的例子，我们用 HTML 搭建了一个按钮，想让这个按钮永远在父元素的中心。

1. margin: 0 auto;：居中利器

这种方法是最简单直接的方法。margin: 0 auto; 这段代码会把元素的左右外边距都设置为自动（auto），这样一来，元素左右两边的空间就会相等，从而达到水平居中的效果。

<div class="container">
  <button>点我</button>
</div>

.container {
  text-align: center;
}

button {
  margin: 0 auto;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  color: #000;
}

水平居中

2. text-align: center;：让文本靠拢

text-align: center; 这段代码会让元素内的文本水平居中。这种方法通常用于需要让多行文本水平居中的情况，比如段落、列表和表格。

<div class="container">
  <p>这是一个段落，我会水平居中。</p>
</div>

.container {
  text-align: center;
}

p {
  margin: 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  color: #000;
}

文本水平居中

二、让元素垂直居中：点缀页面布局

垂直居中，顾名思义就是让元素在父元素内上下居中。比如，一个图片需要垂直居中，以便在父元素内恰到好处地呈现。

1. line-height: 相对居中

line-height: 这段代码可以设置元素的行高，如果将行高设置为与元素的高度相等，那么元素就会垂直居中。

<div class="container">
  <img src="image.jpg">
</div>

.container {
  text-align: center;
}

img {
  margin: 0 auto;
  display: block;
  line-height: 100px;
}

图片垂直居中

2. flexbox：灵活垂直居中

弹性盒布局（Flexbox）是一种更灵活的布局方式，它可以让元素在父元素内自动调整大小和位置。

<div class="container">
  <div class="item">内容</div>
</div>

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.item {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  color: #000;
}

内容垂直居中

三、让元素水平垂直居中：完美对齐之道

水平垂直居中，顾名思义就是让元素在父元素内左右居中，同时上下居中。这种对齐方式非常常见，比如网站页面的导航栏、页脚、弹出窗口等等。

<div class="container">
  <div class="item">内容</div>
</div>

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.item {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  color: #000;
}