css圣杯_CSS居中的圣杯

最新推荐文章于 2025-12-26 23:32:44 发布

翻译最新推荐文章于 2025-12-26 23:32:44 发布 · 205 阅读

文章标签：

#css #html #js #java #vue #ViewUI

本文详细介绍了一种在CSS中实现水平和垂直居中的强大方法，通过使用表格模式和相对定位，确保元素在各种浏览器中都能正确居中，适用于响应式网站设计。

css圣杯

克里斯·科耶尔（Chris Coyier）最近在他的网站CSS Tricks上发布了决策树，以演示使用CSS将事物水平或垂直居中的多种方法。作为独立的解决方案，它们都有它们的警告，但结合起来，它们是一个不可阻挡的居中工具，可在IE8和更高版本中始终使用跨浏览器。

这就是你的做法。

注意：为了涵盖所有基础，我以视频和书面形式提供了说明。

观看视频

下载视频或在YouTube上订阅Tuts + Web Design

阅读教程

如果您要创建一个响应式网站，则很可能会使用百分比来调整元素大小，因此让我们创建一个任意的.container元素：

<div class="container">
  ...
</div>

.container {
  width: 70%;
  height: 70%;
  margin: 40px auto;
  background: red;
}

为了确保我们的包含元素适当地延伸，让我们设置html, body { width: 100%; height: 100%; } html, body { width: 100%; height: 100%; } html, body { width: 100%; height: 100%; } 。

转台

现在，在该.container内部，我们将使用常见的表格模式进行垂直居中。这需要普通的块级元素，并使它们的行为像表单元格一样，从而使我们垂直居中：

<div class="container">
  <div class="outer">
    <div class="inner">
      ...
    </div>
  </div>
</div>

.outer {
  display: table;
  width: 100%;
  height: 100%;
}
.inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

最后，我们将添加一个水平居中的元素：

<div class="container">
  <div class="outer">
    <div class="inner">
      <div class="centered">
        ...
      </div>
    </div>
  </div>
</div>

.centered {
  position: relative;
  display: inline-block;

  width: 50%;
  padding: 1em;
  background: orange;
  color: white;
}

在其中，您可以放置任何您想要的东西，包括动态高度文本块或绝对定位的元素。

GitHub上的演示

改建

要更改元素的水平居中，只需修改.inner的text-align属性。要更改垂直居中，请修改.inner的vertical-align属性。

结论

这个示例可能看起来很多标记，但是工作片段只是三个div ： .outer ， .inner和.centered 。而且这些样式的样式是一致的，因此您可以在整个项目的样板CSS中使用此样式，而无需再担心它。

它比大多数对中技术大得多，而且完全防弹。我希望这成为标准方法，我们最终可以不再担心以CSS为中心。

翻译自: https://webdesign.tutsplus.com/tutorials/the-holy-grail-of-css-centering--cms-22114

css圣杯