CSS全屏div，中间有文字[重复]

Posted 2023-03-05

【中文标题】CSS全屏div，中间有文字[重复]

【英文标题】：CSS full screen div with text in the middle [duplicate]

【发布时间】：2012-05-29 06:03:18

【问题描述】：

我定义了一个css类，所以我可以制作一个div来使用所有浏览器的视口，规则如下：

.fullscreenDiv 
    background-color: #e8e8e8;
    width: 100%;
    height: auto;
    bottom: 0px;
    top: 0px;
    left: 0;
    position: absolute;

现在我希望 div 内的文本正好位于屏幕的中心，因此垂直居中对齐和水平居中居中，但我似乎找不到正确的方法。

它只需要在基于 webkit 的浏览器上工作。

我已经尝试在其中添加一个 P 元素，并将 display 设置为 table-cell（一种使文本居中的常用方法），但运气不佳。

有什么建议吗？

【问题讨论】：

text-align: center; position: absolute; top: 50%; bottom: 50%; width: 100%; - 这应该比接受的答案更好 - 将样式添加到您的文本中

【参考方案1】：

接受的答案有效，但如果：

您不知道内容的尺寸 内容是动态的 你想成为未来的证明

使用这个：

.centered 
  position: fixed; /* or absolute */
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);

有关在这个出色的CSS-Tricks article 中居中内容的更多信息。

---

此外，如果您不需要支持旧浏览器：一个 flex-box 让这变得轻而易举：

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

CSS Tricks 中关于 flexbox 的另一个很棒的指南； http://css-tricks.com/snippets/css/a-guide-to-flexbox/

【参考方案2】：

标准的做法是给居中的元素固定尺寸，并绝对放置：

<div class='fullscreenDiv'>
    <div class="center">Hello World</div>
</div>​

.center 
    position: absolute;
    width: 100px;
    height: 50px;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* margin is -0.5 * dimension */
    margin-top: -25px; 
​

DEMO

【讨论】：

我正在尝试这个，但如果我想将文本也放在“中心”div的中间？

@JuanAlbertoLópezCavallotti 你只会重现这个问题。将text-align: center 添加到center 类将使您成功。如果它只有 1 行文本，您可以添加 line-height: 50px，或者任何居中容器的高度。这也会使其垂直居中。

不确定是否需要额外的元素，但你可以这样做：jsfiddle.net/wzSmc/1

@JuanAlbertoLópezCavallotti 更新了 DEMO：jsfiddle.net/paislee/wzSmc/2

感谢@paislee 解决了我的问题，它正在寻找正确的方式，这才是最重要的！

【参考方案3】：

这个经典问题没有纯 CSS 解决方案。

如果你想实现这一点，你有两个解决方案：

使用表格（丑陋，不符合语义，但是垂直对齐非单行文本的唯一方法） 监听window.resize和绝对定位

编辑：当我说没有解决方案时，我假设您事先不知道要居中的块的大小。如果你知道的话，佩斯利的解法很好

【参考方案4】：

text-align: center 将它水平居中，垂直放置在一个跨度中，并给它一个margin:auto 0; 的css（你可能还必须给跨度一个display: block 属性）