flexbox example 2

center a content using flexbox

by vaheed akhtar

HTML

<!--  example 1 -->
<div class="outer">
 <div>Center me</div>
</div>
<hr />
<!-- example 2 -->
<div class="outer2">
<div>Center me 2</div>
</div>
<hr />

<!-- example 3 -->
<div class="outer3">
<div>Center me 3</div>
</div>

CSS

.outer {
  height: 100px;
  width: 200px;
  background: lightgrey;
  color: red;
  display: flex;
}

.outer div {
  margin: auto;
}

.outer2 {
  height: 100px;
  width: 200px;
  background: lightgreen;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.outer3 {
  height: 100px;
  width: 200px;
  background: coral;
  color: white;
  position: relative;
}

.outer3 div {
  position: absolute;
  top: calc(50% - 10px);
  left: calc(50% - 40px);
}