css圣杯_CSS居中的圣杯

css圣杯

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

这就是你的做法。

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

观看视频

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

阅读教程

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

  ...

.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内部，我们将使用常见的表格模式进行垂直居中。 这需要普通的块级元素，并使它们的行为像表单元格一样，从而使我们垂直居中：

  

    

      ...
    
  

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

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

  

    

      

        ...
      
    
  

.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圣杯