W3 Mind Logo
Home » How to center a DIV horizontally and vertically

How to center a DIV horizontally and vertically

After trying a lot of tricks I found this perfect solution to keep the element or DIV horizontally and vertically center.
This is worked for me and it’s working in all the main browsers. I’d personally recommend to use the below CSS rules. It’s very simple to apply.

				
					.center{ 
  height: 300px;
  position: relative;
  border: 3px solid #fff000; 
}

.center div {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
				
			
				
					<div class="center">
  <div>Lorem ipsum dolor sit amet adipiscing elit.</div>
</div>
				
			

Example:

Lorem ipsum dolor sit amet adipiscing elit.
About Author
Picture of W3Mind

W3Mind

W3Mind focuses on Blogging, Make Money Online, SEO, Business Blogging, Social Media, WordPress, Internet Tools, Web Design and Development.
Give it a Share
Facebook
Twitter
LinkedIn
You May Also Like
How to
START A
BLOG
(step by step)
Load WordPress Sites in as fast as 37ms!