我有一个包含文本的＜div＞元素，我想将这个＜div＞的内容垂直居中对齐。
这是我的＜div＞风格：
#盒子{高度：170px；宽度：270px；背景：#000；字体大小：48px；颜色：#FFF；文本对齐：居中；}<div id=“box”>Lorem ipsum悲哀坐</div>
实现这一目标的最佳方式是什么？
当前回答
<!DOCTYPE html>
<html>
<head>
<style>
.main{
height:450px;
background:#f8f8f8;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
justify-content: center;
width: 100%;
}
</style>
</head>
<body>
<div class="main">
<h1>Hello</h1>
</div>
</body>
</html>
其他回答
简单而通用的方法是表格方法）：
[ctrv]{
display: table !important;
}
[ctrv] > *{ /* Addressing direct descendants */
display: table-cell;
vertical-align: middle;
// text-align: center; /* Optional */
}
在父标记上使用此属性（或等效的类）甚至可以使许多子标记对齐：
<parent ctrv> <ch1/> <ch2/> </parent>
<!DOCTYPE html>
<html>
<head>
<style>
.main{
height:450px;
background:#f8f8f8;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
justify-content: center;
width: 100%;
}
</style>
</head>
<body>
<div class="main">
<h1>Hello</h1>
</div>
</body>
</html>
绝对定位和拉伸
与上面的方法一样，首先将父元素和子元素上的位置分别设置为相对和绝对。从那里情况就不同了。
在下面的代码中，我再次使用了该方法来水平和垂直地居中子对象，尽管您只能使用该方法进行垂直居中。
HTML
<div id="parent">
<div id="child">Content here</div>
</div>
CSS
#parent {position: relative;}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
此方法的思想是通过将上、下、右和左值设置为0，尝试使子元素延伸到所有四条边。因为我们的子元素比我们的父元素小，所以它不能到达所有的四条边。
然而，将自动设置为所有四边的边距会导致相反的边距相等，并将子div显示在父div的中心。
不幸的是，上面的方法在InternetExplorer7及以下版本中不起作用，并且像前面的方法一样，子div中的内容可能会变得太大，导致其被隐藏。
您可以在CSS中使用定位方法：
检查此处的结果。。。。
HTML格式：
<div class="relativediv">
<p>
Make me vertical align as center
</p>
</div>
CSS:
.relativediv {
position: relative;
border: 1px solid #DDD;
height: 300px;
width: 300px
}
.relativediv p {
position: absolute;
top: 50%;
transfrom: translateY(-50%);
}
我只想扩展Michielvoo的答案，以释放对线高度和呼吸div高度的需求。它基本上只是这样一个简化版本：
第二部分{宽度：250px；/*高度：100px；线条高度：100px*/文本对齐：居中；边框：1px实心#12346；背景色：#bbbbff；填充：10px；边距：10px；}跨度{显示：内联块；垂直对齐：中间；线高度：正常；}＜div＞<span>所有的成年人都曾经是孩子。。。但只有少数人记得</span></div>＜div＞<span>现在这是我的秘密，一个非常简单的秘密：只有用心才能看清真相；本质的东西是肉眼看不见的</span></div>
注：注释了封闭分区固定高度所需的cssis部分。
