如何将 div 中的内容水平和垂直居中？
【问题讨论】：
标签： css
水平对齐非常简单：
<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>
对于垂直对齐，它有点棘手： 这是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>
【讨论】：
有多种选择*：
*免责声明：此列表可能不完整。
使用 Flexbox
现在，我们可以使用 flexbox。它是 css-transform 选项的一个非常方便的替代方案。我几乎总是会使用这个解决方案。如果它只是一个元素可能不是，但例如，如果我必须支持一组数据，例如行和列，我希望它们相对居中在中间。
.flexbox {
display: flex;
height: 100px;
flex-flow: row wrap;
align-items: center;
justify-content: center;
background-color: #eaeaea;
border: 1px dotted #333;
}
.item {
/* default => flex: 0 1 auto */
background-color: #fff;
border: 1px dotted #333;
box-sizing: border-box;
}<div class="flexbox">
<div class="item">I am centered in the middle.</div>
<div class="item">I am centered in the middle, too.</div>
</div>使用 CSS 2D 变换
这仍然是一个不错的选择，也是 2015 年接受的解决方案。
它非常纤薄且易于应用，并且不会干扰其他元素的布局。
.boxes {
position: relative;
}
.box {
position: relative;
display: inline-block;
float: left;
width: 200px;
height: 200px;
font-weight: bold;
color: #333;
margin-right: 10px;
margin-bottom: 10px;
background-color: #eaeaea;
}
.h-center {
text-align: center;
}
.v-center span {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translate(0, -50%);
}<div class="boxes">
<div class="box h-center">horizontally centered lorem ipsun dolor sit amet</div>
<div class="box v-center"><span>vertically centered lorem ipsun dolor sit amet lorem ipsun dolor sit amet</span></div>
<div class="box h-center v-center"><span>horizontally and vertically centered lorem ipsun dolor sit amet</span></div>
</div>注意：这也适用于
:after和:before伪元素。
使用网格
这可能只是矫枉过正，但这取决于您的 DOM。如果您仍然想使用网格，那为什么不呢。它是非常强大的替代方案，而且您的设计确实具有最大的灵活性。
注意：为了垂直对齐项目，我们结合使用 flexbox 网格。但我们也可以在项目上使用
display: grid。
.grid {
display: grid;
width: 400px;
grid-template-rows: 100px;
grid-template-columns: 100px 100px 100px;
grid-gap: 3px;
align-items: center;
justify-content: center;
background-color: #eaeaea;
border: 1px dotted #333;
}
.item {
display: flex;
justify-content: center;
align-items: center;
border: 1px dotted #333;
box-sizing: border-box;
}
.item-large {
height: 80px;
}<div class="grid">
<div class="item">Item 1</div>
<div class="item item-large">Item 2</div>
<div class="item">Item 3</div>
</div>CSS article about grid
CSS article about flexbox
CSS article about centering without flexbox or grid
【讨论】：
与所有调整 css。 如果可能的话，用桌子把它包起来 高度和宽度为 100% 和 td 设置为垂直居中对齐，文本居中对齐
【讨论】：
通过使用 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%);
}
【讨论】：