1

What i want to get is the following image.

enter image description here

There are two divs. The inner div is at the center of the outer div, and text box1 is at the center of inner div.

The css code can't achieve the target.

div.father {
    align-items: center;
    border: 1px solid black;
    display: flex;
    height: 300px;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
}

div.son {
    border: 1px solid black;
    height: 100px;
    width: 100px;
}

<div class="father">
  <div class="son">box1</div>
</div>

enter image description here

How to put the box1 at the center of div.son?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
showkey
  • 482
  • 42
  • 140
  • 295
  • 1
    Dupe of http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css – Luiz Tavares Jan 31 '16 at 03:30
  • You don't need `position: absolute`, `top`, `left` or `transform`. You can nest flexboxes (i.e. make both `.father` and `.son` flex containers). Here's a simple method: http://stackoverflow.com/a/33049198/3597276 – Michael Benjamin Jan 31 '16 at 11:36
  • See also Box #56 here: http://stackoverflow.com/a/33856609/3597276 – Michael Benjamin Jan 31 '16 at 11:36

5 Answers5

1

Try this, hope will work.

div.son {
border: 1px solid black;
height: 100px;
width: 100px;
text-align: center;
vertical-align: middle;
line-height: 100px;

}

CapeStar
  • 147
  • 9
1

This is simple, just add text-align: center to any of the elements for horizontal alignment.

E.g. 

div.son {
    ...
    text-align:center; /* horizontal align */
}

As for vertical alignment, if it is one word, you can use line-height like so:

div.son {
    border: 1px solid black;
    height: 100px;
    width: 100px;
    text-align:center; /* horizontal align */
    line-height:100px; /* vertical align */
}
Aziz
  • 7,685
  • 3
  • 31
  • 54
1

You can use flex box. Here's my fiddle.

div.father {
  border: 1px solid black;
  align-items: center;
  justify-content: center;
  display: flex;
  height: 300px;
  width: 300px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  /**/
  margin-top: 100px;/*only for snippet spacing*/
}
div.son {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  align-items: center;
  justify-content: center;
  display: flex;
}
<div class="father">
  <div class="son">box1</div>
</div>
alexwc_
  • 1,595
  • 2
  • 24
  • 35
0

Try something like this: https://jsfiddle.net/j1e9qoao/

div.father {
  display: flex;

    align-items: center;
    border: 1px solid black;
    height: 300px;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
}

div.son {
 vertical-align: middle;
 display: table-cell;
 border: 1px solid black;
    height: 100px;
    width: 100px;
}
user1709251
  • 246
  • 4
  • 16
-1

You may try this one:

div.son {
    border: 1px solid black;
    padding: 50px;
}
Murad Hasan
  • 9,565
  • 2
  • 21
  • 42