如何将h2标记移动到div中心?

I have this div :

我有这个div:

    <div id="ShowCase" style="background-color: black; position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; opacity: 0.5;  color: white;">
            <h2 >شما با این گزینه می توانید</h2>
    </div>

want to show h2 tag into ShowCase div center,but I am getting this output:

想要将h2标记显示在展示div中心中，但是我得到了这个输出:

How can I solve this?

我怎么解决这个问题呢?

3 个解决方案

#1

If you're talking just horizontally aligning the text; just add

如果只是水平对齐文字;只需添加

#ShowCase {
   text-align: center;
}

If you're talking vertical aligned, then you can use flexbox or display:table. I've written out the display:table method as it is has more browser compatibility.

如果你说的是垂直对齐，那么你可以使用flexbox或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>

#2

use text-align:center in h2 tag

使用文本对齐:中心在h2标签。

h2{
  text-align:center;
}

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

If you want to set it as center vertically also then try in this way--

如果你想把它垂直放置，也可以这样试试。

#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>

Here showcase height and width is as like your screen width and height.

#3

you can adjust it with text-align or with margin,but I would recommend you to go with text-align

你可以用文本对齐或边缘调整，但我建议你使用文本对齐方式。

Here I have removed your display:none and used text-algin:center

这里我删除了你的显示器:没有，并使用了文本-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>

#1