如何将h2标签移动到div的中心？

Question

我有这个div：

{{1}}

想要将h2标签显示到ShowCase div中心，但是我得到了这个输出：

我该如何解决这个问题？

Answer 1

在h2标签中使用text-align：center

h2{
  text-align:center;
}

<div id="ShowCase">
        <h2>شما با این گزینه می توانید</h2>
</div>

如果你想将它设置为垂直中心，那么试试这种方式 -

#ShowCase
{
  width: 400px;
  height: 200px;
  display: table;
  background:blue;
  
}

h2{
  text-align: center;
  display: table-cell;
  vertical-align: middle;
 
}

<div id="ShowCase">
        <h2>شما با این گزینه می توانید</h2>
</div>

这里展示高度和宽度就像你的屏幕宽度和高度。

Answer 2

如果你正在谈论只是水平对齐文字;只需添加

#ShowCase {
   text-align: center;
}

如果您正在谈论垂直对齐，那么您可以使用flexbox或display:table。我写了display:table方法，因为它有更多的浏览器兼容性。

body {
  background-color: #555;
}

#ShowCase {
  background-color: black; 
  position: absolute; 
  height: 100%; 
  width: 100%; 
  top: 0px; 
  left: 0px; 
  opacity: 0.5; 
  color: white;
  
  /* Horizonatally Centers Text -- */
  text-align: center;
  
  /* Needed in order to Vertically Center Text --*/
   display: table; 

}

/* Vertically Aligns Text -- */
#ShowCase h2 {
  display: table-cell;
  vertical-align: middle;
}

<div id="ShowCase">
        <h2>شما با این گزینه می توانید</h2>
</div>

Answer 3

您可以使用text-align或margin进行调整，但我建议您使用text-align

这里我删除了你的display：none并使用了text-algin：center

#ShowCase{
  background-color: black; 
  position: absolute; 
  height: 100%; width: 100%; 
  top: 0px;
  left: 0px;
  opacity: 1;
  color: white;
}
h2{
  text-align:center;
}

<div id="ShowCase">
        <h2>شما با این گزینه می توانید</h2>
</div>