CSS 实现元素在屏幕居中显示

有时候，我们需要让一个元素在屏幕中居中显示，可能是图片、文本或是一个弹出窗口。在这篇文章中，我们将简单介绍如何使用 CSS 将元素居中显示在页面上。

水平居中

行内元素

对于行内元素，我们可以使用 text-align 属性将它们水平居中。例如：

.text-center {
  text-align: center;
}

<p class="text-center">我是一段文本，居中显示</p>

块级元素

对于块级元素，我们可以设置其宽度为一个具体值，然后将左右边距都设置为 auto。例如：

.block-center {
  width: 50%;
  margin: 0 auto;
}

这里的 width 属性可以设置为任何你需要的宽度值。将左右边距设置为 auto 可以使这个块级元素水平居中。

<div class="block-center">
  <p>我是一个块级元素，居中显示</p>
</div>

垂直居中

对于固定高度的元素

如果元素的高度是固定的，我们可以使用 position 和 top 属性将它们垂直居中。例如：

.container {
  position: relative;
  height: 200px;
}

.centered {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

首先，我们将容器元素 .container 设置为 position: relative，这样后代元素 .centered 的定位是相对于容器的而不是整个页面的。接下来，将 .centered 元素的 position 属性设置为 absolute，再将 top 属性设置为 50%，就将它垂直居中了。最后，使用 transform 属性和 translateY(-50%) 将这个元素向上移动 50% 的高度。这样就能完美地垂直居中了。

<div class="container">
  <div class="centered">
    <p>我是一个固定高度的元素，垂直居中</p>
  </div>
</div>

对于不固定高度的元素

如果元素的高度不是固定的，我们可以再使用一些技巧将它们垂直居中。例如：

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

这里我们使用了 CSS Flexbox 布局。将容器元素 .container 的 display 属性设置为 flex，再使用 align-items 和 justify-content 属性将元素在垂直和水平方向上都居中。这样，即使元素的高度不固定，也能轻松地垂直居中。

<div class="container">
  <p>我是一个不固定高度的元素，垂直居中</p>
</div>

以上就是在 CSS 中实现元素屏幕居中显示的方法，希望对你有所帮助！