/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

7 votes221 views3 answers
Bootstrap remove outline
CSS Bootstrap
0 vote148 views1 answer
Css hover change more than one element
CSS
1 vote165 views2 answers
Absolute vertical position css
CSS
-1 vote144 views1 answer
Css border image property
CSS
14 votes143 views2 answers
.col-12 bootstrap
CSS
1 vote113 views1 answer
Sm size website
CSS
0 vote163 views1 answer
Css mobile friendly
CSS
71 votes149 views6 answers
How to center items in css
CSS
15 votes139 views3 answers
Css wrap
CSS
36 votes146 views4 answers
Adding gradient to text color
CSS