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上的演示

改建

要更改元素的水平居中,只需修改.innertext-align属性。 要更改垂直居中,请修改.innervertical-align属性。

结论

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

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

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

css圣杯

你可能感兴趣的:(css,html,js,java,vue)