/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

56 votes109 views3 answers
Css curved border
CSS
1 vote112 views1 answer
Disable checkbox click event
CSS
1 vote115 views1 answer
Css no underline
CSS
0 vote119 views1 answer
Css psedou content data
CSS
0 vote113 views2 answers
How to link css to html in visual studio code
CSS
0 vote118 views1 answer
How to give rgba in tailwind
CSS
1 vote111 views1 answer
Increase font size zenity
CSS
0 vote119 views1 answer
Bootstrap-navbar-containers
CSS
0 vote119 views1 answer
Capitalize the first letter of string using CSS
CSS
0 vote113 views1 answer
Css option value
CSS