如何在IE中的Div中垂直中心文本

Question

我已经看过很多次，这些解决方案都不适合我。正如您在小提琴中看到的那样，这正是我想要在Chrome中想要的，但是在IE中，文本被卡在盒子的顶部，而不是中间。如果您在IE浏览器和Chrome并肩上运行它，您会看到我的意思。我希望在中间，使用Margin：auto；在Chrome中运作完美，但在IE中效果不佳。我不确定会将段落移到的修复程序，因此垂直和水平对齐中间。

<section class="info"> 
<p class="infofont">Size: Large<br><br>
100% Cotton<br><br>
Excellent Condition!
</p>
</section>

CSS：

.info{
display:flex;
width:325px;
margin:auto;    
}
.infofont{
font-weight:bold;
text-align:center;
margin:auto;
}

https://jsfiddle.net/fmu8g38h/

Answer 1

尝试一下：

.info{
    display:flex;
    top:50%;
    left:50%;   
    transform: translate(-50%, -50%);
    position:absolute;
}

https://jsfiddle.net/k1cbjvj7/1/

Answer 2

margin：auto用于水平对齐文本。

要在中心对齐，必须单独对齐

Answer 3

您忘了编写flex-direction: row / column; align-items: center; justify-content: center;何时display为flex，并且内部内容将为vertically和horizontally中心，您应该从.infofont CC_7中删除margin: auto;。

以下是更新您的CSS代码。

.info{
    border: 1px solid black;
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 325px;
    margin:auto auto;   
    height: 500px;  
}
.infofont{
    font-weight:bold;
    text-align:center;
}

检查剪切

.info{
  border: 1px solid black;
  align-items: center;
	display:flex;
  flex-direction: row;
  justify-content: center;
	width:325px;
	margin:auto auto;	
  height:500px;	
}
.infofont{
  color: green;
  font-size: 16px;
	font-weight:bold;
  line-height: 1.2;
  margin: 0;
	text-align:center;
}
*,
*:after,
*:before{
  box-sizing: inherit;
}
html{
  box-sizing: border-box;
}

<section class="info"> 
<p class="infofont">Size: Large<br><br>
100% Cotton<br><br>
Excellent Condition!
</p>
 
</section>

注意：我仅测试此代码IE11，Chrome和Safari。