/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

9 votes357 views3 answers
How to change another element on hover
CSS
0 vote339 views1 answer
Html min width
CSS
6 votes343 views1 answer
All text in caps using css
CSS
1 vote327 views1 answer
Place many images in a div beautifully
CSS
0 vote312 views1 answer
Christmas red color code
CSS
1 vote309 views1 answer
Remove ul decoration
CSS
99 votes318 views2 answers
Css absolute in absolute
CSS
18 votes331 views4 answers
Background color none
CSS
2 votes279 views1 answer
Xpath vs css selector
CSS
7 votes343 views2 answers
Detect if an element has a class jQurey
CSS