Html 如何将文本保留在 div 中，始终位于中间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10538881/
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
How to keep text inside a div, always in the middle?
提问by rmz
I'm trying to make text stay in the middle of a resizable DIV. Here's the example:
我试图让文本停留在可调整大小的 DIV 的中间。这是示例：
CSS
CSS
#rightmenu {
position: absolute;
z-index: 999999;
right: 0;
height: 60%;
text-align: center;
}
HTML
HTML
<div id="rightmenu">This text should be center aligned and in the middle of the resizable rightmenu</div>
I've tried to make a Class to contain the text with the "margin-top and margin-bottom" both on auto, but doesn't work.
我试图让一个类在自动上包含带有“margin-top 和 margin-bottom”的文本，但不起作用。
回答by Mateusz Kocz
If you don't care about IE7 support, you can do it like that:
如果你不关心 IE7 支持，你可以这样做：
HTML:
HTML：
<div id=wrap>
<div id=inside>
Content, content, content.
</div>
</div>
CSS:
CSS：
#wrap {
/* Your styling. */
position: absolute;
z-index: 999999;
right: 0;
height: 60%;
text-align: center;
/* Solution part I. */
display: table;
}
/* Solution part II. */
#inside {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
The code: http://tinkerbin.com/ETMVplub
代码：http: //tinkerbin.com/ETMVplub
If you're OK with JavaScript you can try this jQuery plugin: http://centratissimo.musings.it/but since it also doesn't seems to support IE7 the CSS solution is probably better.
如果你对 JavaScript 没问题，你可以试试这个 jQuery 插件：http: //centratissimo.musings.it/但因为它似乎也不支持 IE7，所以 CSS 解决方案可能更好。
回答by domdambrogia
Flexboxhas really changed the game with aligning elements in a fluid manner. Define your container element to be display: flexand then to align your inner children you would use justify-content: center; align-items: center;
Flexbox通过以流畅的方式对齐元素确实改变了游戏规则。定义您的容器元素display: flex，然后对齐您将使用的内部孩子justify-content: center; align-items: center;
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.parent {
height: 500px;
width: 500px;
position: relative;
}
<div class="parent">
<div class="container">
<p>Hello</p>
<p>World</p>
</div>
</div>
You'll notice that "Hello" and "World" will both be vertically and horizontally centered within the .containerelement.
您会注意到“Hello”和“World”都将在.container元素内垂直和水平居中。
回答by iambriansreed
Replace height: 60%;with padding: 30% 0;.
替换height: 60%;为padding: 30% 0;。
回答by Jerry Jones
Check if this is needed:
检查是否需要这样做：
<html>
<head>
<style type="text/css">
div {
height: 100px;
width: 100px;
background: #ccc;
text-align: center;
}
p {
line-height: 100px;
}
</style>
</head>
<body>
<div>
<p>centered</p>
</div>
</body>
</html>
回答by Kneel-Before-ZOD
If you want the text to be horizontally centered in a div, 'text-align:center;' is your friend. If you want it vertically centered; wrap the content inside an inner div, and then use 'margin: auto' for that inner div. Of course, you'll have to give the inner div a width; otherwise, the horizontal center won't work.
'valign="middle"' also works in tables if tables are an option (otherwise discouraged)
如果您希望文本在 div 中水平居中，'text-align:center;' 是你的朋友。如果你想让它垂直居中；将内容包裹在内部 div 中，然后为该内部 div 使用 'margin: auto'。当然，你必须给内部 div 一个宽度；否则，水平中心将不起作用。
如果表格是一个选项，'valign="middle"' 也适用于表格（否则不鼓励）
