/CSS/How to center horizontally and vertically block div

How to center horizontally and vertically block div

Center div horizontally and vertically

.parent {
  position: relative;
}
.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Source: codepen.io

Vertical and horizontal align center div

.center {
  height: 200px;
  position: relative;
  border: 3px solid green;
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Similar codes

0 vote212 views2 answers
Dont break word css
CSS
0 vote153 views1 answer
Video camera icon font awesome
CSS
0 vote185 views1 answer
Sticky footer bootstrap 3
CSS
3 votes217 views4 answers
How to remove css from element using jquery
CSS
2 votes206 views2 answers
Why is my footer not at the bottom html
CSS
0 vote215 views2 answers
Centralizing a table with css
CSS
0 vote259 views1 answer
Css inherit class
CSS
-2 votes190 views3 answers
Css example
CSS
13 votes218 views4 answers
How to print background bootstrap
CSS
0 vote193 views2 answers
Laravel 7 css loading slow
CSS