/CSS/Center align div vertically and horizontally css

Center align div vertically and horizontally css

Center div horizontally and vertically

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

Source: codepen.io

Center align div vertically and horizontally css

.parent{
	display: flex;
    justify-content: center;
  	align-items: center;
}
/* Child elements will be perfectly centered automatically */

Source: programmersportal.com

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

3 votes274 views1 answer
Increase text from input
CSS
4 votes209 views2 answers
For in sass
CSS
1 vote187 views1 answer
Make bg blurred css
CSS
5 votes149 views1 answer
Css custom strikethrough
CSS
0 vote168 views1 answer
How to remove underline from list item in html
CSS
0 vote204 views1 answer
Carousel inner item populate with for loop puting active class on all carousel item
CSS
0 vote217 views1 answer
Css tips and tricks to handle the complicated stuffs in design part which is helpfull to handle at tha critical time and to deliver requirement to the client to the main resource
CSS
1 vote197 views1 answer
Screen rotation in css
CSS
0 vote211 views1 answer
Calc(100vh - px)
CSS
0 vote185 views1 answer
List style type none still leaves room for bullet
CSS