在另一个 div 内垂直对齐 div 没有 flex

Question

How to vertically align div inside another div using property vertical-align:middle .

Here is my code.

 .hello { height: 100px; width: 100px; background-color: black; vertical-align: middle; display: inline-block; color: white; } .parent { height: 400px; width: 400px; border: 1px solid red; display: table-cell; }

 <div class ="parent "> <div class="hello"> hello </div> </div>

I referred and found giving parent table-cell property and child inline-block works but still not.

Html

Answer 1

Here you go.

Code Snippet:

 .hello { height: 100px; width: 100px; background-color: black; vertical-align: middle; display: inline-block; color: white; } .parent { height: 400px; width: 400px; border: 1px solid red; display: table-cell; vertical-align: middle; text-align: center; }

 <div class="parent "> <div class="hello"> hello </div> </div>

Answer 2

vertical-align works only for display: table-cell, in some browsers you should wrap parent with display: table

.hello {
  height: 100px;
  width: 100px;
}

.parent {
  height: 400px;
  width: 400px;
  display: table-cell;
  vertical-align: middle;
}

<div class ="parent ">
  <div class="hello">
    hello
  </div>
</div> 

Answer 3

Use vertical-align: middle on .parent and make .hello - display: block with margin: 0 auto , like:

.hello {
  display: block;
  margin: 0 auto;
}

.parent {
  display: table-cell;
  vertical-align: middle;
}

Have a look at the snippet below:

 .hello{ height:100px; width:100px; background-color:black; display: block; margin: 0 auto; color: white; } .parent{ height:400px; width:400px; border:1px solid red; display: table-cell; vertical-align: middle; }

 <div class ="parent "> <div class="hello"> hello </div> </div>

Hope this helps!