Question: I have a problem with the heigth of the `div.divB` element in this code:

```
<div class="divA">
    <img src="http://lorempixel.com/1000/130"/>
    <div class="divB">
        <span>Text text</span>
    </div>
</div>

```

See [this jsfiddle](https://jsfiddle.net/ye6rntr6/6/).

Why my is `div.divB.height != div.divA.height`? But his height is 100%.
I want it so that " text text " is in the middle.

EDIT:   

Height image is random, because image file is uploading by User. In this example I use 130 but can be 200 or 50.

Answer: 
That is because you are declaring the height of the table to be 100px, which is 30px less than the height of the image. If you update that value to 130px, it should work as intended:

```
.divB{
    display: table;
    width: 100%;
    height: 130px;
    position: absolute;
    top: 0px;
    left: 0px;
}

```

[See fiddle.](https://jsfiddle.net/teddyrised/ye6rntr6/1/)

Alternatively, you might want to consider other approaches if your image element has a dynamic, non-static height. You can use (1) the translate by -50% approach, or (2) the flexbox approach.

For the translate by -50% approach, this works by simply forcibly stretching the parent container, `.divB`, to the size of its wrapping parent, by setting all four cardinal values to 0. After that, we position the inner child by 50% from the top, and then offset it vertically upwards by half of its height—that's when the translate by -50% trick kicks in:

```
.divB{
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}
.divB > span{
    display: block;
    transform: translateY(-50%);
    padding-left: 120px;
    position: absolute;
    top: 50%;
    font-size: 1.8rem;
    color:white;
}

```

[See alternative solution #1.](https://jsfiddle.net/teddyrised/ye6rntr6/2/)

---

For the flexbox approach, we repeat the first step in the first solution—setting all cardinal offsets to 0—and then simply using the flexbox specification and align the inner element to the vertical center by using `align-items: center`:

```
.divB {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

```

[See alternative solution #2.](https://jsfiddle.net/teddyrised/ye6rntr6/5/)
Firstly, `divA` is still set to block, so while it may have an image which is only 1000px wide, it will continue being wider than that image, setting the element to `display: inline-block` will help make sure that its widths are set fine.

Next, you need to set the height of `divB` to the same as `divA`. In this case its 130px.

You are also using padding for to centre the text, when you should really be using the `text-align: center;` ability.

Below is the full example

```css
.divA {
  position: relative;
  display: inline-block;
  overflow: auto;
}
.divB {
  display: table;
  width: 100%;
  height: 130px;
  position: absolute;
  top: 0px;
  left: 0px;
}
.divB > span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 1.8rem;
  color: white;
}
```

```html
<div class="divA">
  <img src="http://lorempixel.com/1000/130" />
  <div class="divB">
    <span>Text text</span>
  </div>
</div>
```