/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

6 votes197 views2 answers
Css browser prefixes
CSS
0 vote251 views2 answers
Fluid typography
CSS
0 vote202 views1 answer
Add logo html css
CSS
0 vote203 views1 answer
Flex align self
CSS
4 votes259 views2 answers
Increase the size of an image on hover using css
CSS
11 votes240 views2 answers
Css image filter black and white
CSS
27 votes213 views3 answers
Align div to center of screen
CSS
0 vote207 views1 answer
Css how to center a link
CSS
2 votes200 views1 answer
Html remove hittest from element
CSS
3 votes216 views1 answer
Responsive flexbox in css
CSS