/CSS/Css center horizontally and vertically

Css center horizontally and vertically

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Center div horizontally and vertically

.parent {
  position: relative;
}
.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Source: codepen.io

Css center vertically and horizontally

body {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
/* to make "align-items: center" work: use "min-height: 100vh;"
100vh = 100% Viewport Height */

Similar codes

1 vote355 views1 answer
How to get element details using cssselector using beautifulsoup
CSS
1 vote339 views1 answer
Add cursor to html button
CSS
92 votes458 views5 answers
Bootstrap primary color code
CSS Bootstrap
3 votes371 views2 answers
Downgrade composer to 1 in vagrant
CSS
0 vote371 views2 answers
Css prevent scrolling behind overlay
CSS
6 votes297 views2 answers
Difference between justify content and justify in grid
CSS
0 vote386 views2 answers
How to link css to html in visual studio code
CSS
53 votes345 views6 answers
How to underline text in css
CSS
27 votes346 views1 answer
Css how to create gradients on text outline
CSS
0 vote349 views1 answer
Css 2 div cote à cote
CSS