如何使用 CSS 将 div 中的内容居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4374650/
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 do I center content in a div using CSS?
提问by Thomas
How do I center content in a div both horizontally and vertically?
如何水平和垂直居中 div 中的内容？
采纳答案by F. Müller
This should fit your needs. It is a CSS-2D-transition trick. I have recently come across the following solution:
这应该符合您的需求。这是一个 CSS-2D 转换技巧。我最近遇到了以下解决方案：
* {
font-family: Arial;
font-size: 14px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
*:after,
*:before {
content: "";
display: table;
}
*:after {
clear: both;
}
.title {
font-family: Georgia;
font-size: 36px;
line-height: 1.25;
margin-top: 0;
}
.blocks {
position: relative;
}
.block {
position: relative;
display: inline-block;
float: left;
width: 200px;
height: 200px;
font-weight: bold;
color: #FFFFFF;
margin-right: 10px;
margin-bottom: 10px;
}
.block:first-child {
background-color: green;
}
.block:nth-child(2) {
background-color: red;
}
.block:nth-child(3) {
background-color: blue;
}
.h-center {
text-align: center;
}
.v-center span {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translate(0, -50%);
}<h1 class="title">3 Boxes with different text-align settings.</h1>
<div class="blocks">
<div class="block h-center">horizontally centered lorem ipsun dolor sit amet</div>
<div class="block v-center"><span>vertically centered lorem ipsun dolor sit amet lorem ipsun dolor sit amet</span></div>
<div class="block h-center v-center"><span>horizontally and vertically centered lorem ipsun dolor sit amet</span></div>
</div>Note: This does also work with :after and :before pseudo-elements.
注意：这也适用于 :after 和 :before 伪元素。
You can also read here: css-tricks.com
你也可以在这里阅读：css-tricks.com
You can test it here: jsfiddle
你可以在这里测试：jsfiddle
回答by AnD
To align horizontally it's pretty straight forward:
水平对齐非常简单：
<style type="text/css">
body {
margin: 0;
padding: 0;
text-align: center;
}
.bodyclass #container {
width: ???px; /*SET your width here*/
margin: 0 auto;
text-align: left;
}
</style>
<body class="bodyclass ">
<div id="container">type your content here</div>
</body>
and for vertical align, it's a bit tricky: here's the source
对于垂直对齐，这有点棘手：这是源
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.greenBorder {border: 1px solid green;} /* just borders to see it */
</style>
</head>
<body>
<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>
回答by Oliver Lim
with all the adjusting css. if possible, wrap it with a table with height and width as 100% and td set it to vertical align to middle, text-align to center
与所有调整CSS。如果可能，用高度和宽度为 100% 的表格将其包裹起来，然后将其设置为垂直居中对齐，文本居中对齐
回答by Awais
By using transform: works like a charm!
通过使用 transform: 就像一个魅力！
<div class="parent">
<span>center content using transform</span>
</div>
//CSS
.parent {
position: relative;
height: 200px;
border: 1px solid;
}
.parent span {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
