如何在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

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

要居中对齐，顶部必须分开对齐

Answer 2

试试这个代替：

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

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

Answer 3

您忘了写flex-direction: row / column; align-items: center; justify-content: center; flex-direction: row / column; align-items: center; justify-content: center; 当display为flex且内部内容在vertically和horizontally居中时，应删除margin: auto; 来自.infofont class 。

下面是更新您的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上测试此代码。