Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Vertical Alignment In Css Responsive

Post a Comment
This question might be an answered one and it may sound silly. I would like to align any element whether it is a text, image or a div to align in the center vertically and it shoul

Solution 1:

You can use the following solution, using the tranform property:

.in-middle{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
<divclass="in-middle"><h1>This should be aligned in the center</h1><p>Paragraph which should also be centered</p></div>

It's not recommended to use margin-top instead of tranform to vertically center elements.

Solution 2:

You should use css3 flexbox. It will center your content vertically and horizontally and it won't overlap over the content following it.

body {
  margin: 0;
}
.in-middle {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  height: 100vh;
}
<body><divclass="in-middle"><h1>This should be aligned in the center</h1><p>Paragraph which should also be centered</p></div><p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet...</p></body>

Solution 3: 

position: absolute;
   top: 50%;
   transform: translateY(-50%);

this will center the element vertically.

.in-middle{
   width:100%;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
}
<body><divclass="in-middle"><h1>This should be aligned in the center</h1><p>Paragraph which should also be centered</p></div></body>

Solution 4:

With flexbox:

.in-middle {
  height: 100%;      
  display: flex;
  align-items: center;
}

<body><divclass="in-middle"><h1>This should be aligned in the center</h1><p>Paragraph which should also be centered</p></div></body>

Post a Comment for "Vertical Alignment In Css Responsive"