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;为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。

如何在IE中的div内垂直居中文本？

3 个答案: