Html CSS 全屏 div 中间有文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10707253/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS full screen div with text in the middle
提问by Juan Alberto López Cavallotti
I have a css class defined so I can make a div to use all the browser's viewport, the rule is the following:
我定义了一个 css 类，所以我可以创建一个 div 来使用所有浏览器的视口，规则如下：
.fullscreenDiv {
background-color: #e8e8e8;
width: 100%;
height: auto;
bottom: 0px;
top: 0px;
left: 0;
position: absolute;
}
Now I want the text inside the div to be in the exact center of the screen so, vertical align center and horizontal align middle, but I can't seem to find the proper way to do so.
现在我希望 div 内的文本位于屏幕的正中央，因此垂直对齐中心和水平对齐中间，但我似乎无法找到正确的方法。
It only needs to work on webkit based browsers.
它只需要在基于 webkit 的浏览器上工作。
I already tried to add a P element inside with displayset to table-cell(a common way of centering text) without luck.
我已经尝试在里面添加一个 P 元素并display设置为table-cell（一种常见的文本居中方式），但没有运气。
Any suggestions?
有什么建议？
回答by agconti
The accepted answer works, but if:
接受的答案有效，但如果：
- you don't know the content's dimensions
- the content is dynamic
- you want to be future proof
- 你不知道内容的维度
- 内容是动态的
- 你想成为未来的证明
use this:
用这个：
.centered {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
More information about centering content in this excellent CSS-Tricks article.
这篇优秀的CSS-Tricks 文章中有关居中内容的更多信息。
此外，如果您不需要支持旧浏览器：一个 flex-box 让这成为小菜一碟：
.center{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Another great guide about flexboxs from CSS Tricks; http://css-tricks.com/snippets/css/a-guide-to-flexbox/
另一个来自 CSS Tricks 的关于 flexbox 的很棒的指南；http://css-tricks.com/snippets/css/a-guide-to-flexbox/
回答by paislee
The standard approach is to give the centered element fixed dimensions, and place it absolutely:
标准方法是给居中元素固定尺寸，并将其绝对放置：
<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;
}?
回答by Samuel Rossille
There is no pure CSS solution to this classical problem.
这个经典问题没有纯 CSS 解决方案。
If you want to achieve this, you have two solutions:
如果你想实现这一点，你有两个解决方案：
- Using a table (ugly, non semantic, but the only way to vertically align things that are not a single line of text)
- Listening to window.resize and absolute positionning
- 使用表格（丑陋，非语义，但垂直对齐不是单行文本的事物的唯一方法）
- 听 window.resize 和绝对定位
EDIT: when I say that there is no solution, I take as an hypothesis that you don't know in advance the size of the block to center. If you know it, paislee's solution is very good
编辑：当我说没有解决方案时，我假设您事先不知道要居中的块的大小。如果你知道，paislee的解决方案非常好
回答by Ryan
text-align: centerwill center it horizontally as for vertically put it in a span and give it a css of margin:auto 0;(you will probably also have to give the span a display: blockproperty)
text-align: center将它水平居中，垂直地将它放在一个跨度中并给它一个 css margin:auto 0;(你可能还必须给跨度一个display: block属性)
