0

I'm trying to center a text inside a Relative>Absolute>Relative>'text to be centered'. I've tried most of the solutions that I could find, but I can only get it to center horizontally. Here is a Fiddle of what I've got so far.

HTML: 

 <div class='outer'>
  <div class='inner'>
    <div class='inner1'>
      <p>
      text
      </p>
    </div>
  </div>
</div>

CSS: 

.outer{
  position: relative;
  width: 500px;
  height: 250px;
  background-color: red;
}

.inner{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: blue;
  top:20px;
  left: 50px;
}

.inner1{
  position: relative;
}

.inner1 p{
  text-align: center;
  margin: 0;
}
Ramzi Khahil
  • 4,932
  • 4
  • 35
  • 69
Bogdan Daniel
  • 2,689
  • 11
  • 43
  • 76

1 Answers1

3

here try this css, just used table and table-cell, with the table at 100% height and width.

.outer{
  position: relative;
  width: 500px;
  height: 250px;
  background-color: red;
}

.inner{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: blue;
  top:20px;
  left: 50px;
}

.inner1{
  position: relative;
  width: 100%;
  height: 100%;
  display: table;
}

.inner1 p{
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  margin: 0;
}
<div class='outer'>
  <div class='inner'>
    <div class='inner1'>
      <p>
      text
      </p>
    </div>
  </div>

</div>
MennyMez
  • 2,426
  • 18
  • 18