/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

22 votes190 views2 answers
Rgb gold color
CSS
0 vote159 views1 answer
Restrict css to apply on div
CSS
0 vote278 views1 answer
DOM element add multiple attributes
CSS
8 votes148 views2 answers
Horizontal align icon css
CSS
0 vote144 views1 answer
Css invert text color
CSS
1 vote152 views1 answer
Javafx right-align in vbox
CSS
12 votes162 views6 answers
Responsive text
CSS
1 vote165 views1 answer
Difference between html and css
CSS
52 votes150 views4 answers
Css change text size
CSS
76 votes178 views6 answers
Display flex css
CSS