Align an element horizontally & vertically center in css

Align an element horizontally & vertically center in css

Align an element horizontally & vertically center using css
Text in aligned horizontally
Text in aligned horizontal & vertically

 

<div class="container horizontal">
  <div>Text in aligned horizontally</div>
</div>

<div class="container vertical-horizontal">
  <div>Text in aligned horizontal & vertically</div>
</div>
.container {
  width: 300px;
  height: 200px;
  border: 2px solid;
  margin: 20px auto;
}

.horizontal div {
  text-align: center;
  margin: 0 auto;
  border: 2px solid red;
}

.vertical-horizontal {
  position: relative;
}

.vertical-horizontal div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  width: 90%;
  height: 10%;
  border: 2px solid red;
}

 

Leave a Comment

Your email address will not be published. Required fields are marked *