html – Centering a div to the center of the parent div

Question:

A hackneyed question, but I can't cope. There is an outer div with an inner div and a full-width image

Can't center text over image

<div class="one">
  <div class="two">Text</div>
  <img class="full" src="https://pp.vk.me/c630828/v630828919/5293e/hThcyFPuX24.jpg">    
</div>

css

.one {
  background-color: #ccc;

}
.two {
  width: 40%;
  height: 40%;
  margin: 0px auto;
  text-align: center;
}

.full {
  width:100%;
  height: auto;
}

Answer:

Apply absolute positioning + margin: auto;

* {
  margin: 0;
  padding: 0;
}
.one {
  background-color: #ccc;
  position: relative;
}
.two {
  width: 40%;
  height: 40%;
  margin: 0px auto;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: #ccc;
}
.full {
  width: 100%;
  height: auto;
}
<div class="one">
  <div class="two">Text</div>
  <img class="full" src="https://pp.vk.me/c630828/v630828919/5293e/hThcyFPuX24.jpg">
</div>
Scroll to Top