Menu
What is the easiest way to align a div whose position is relative horizontally and vertically using CSS ? The width and the height of the div is unknown, i.e. it should work for every div dimension and in all major browsers. I mean center alignment.
I thought to make the horizontal alignment using:
margin-left: auto; margin-right: auto; like I did here.
Is this a good cross browser solution for horizontal alignment ?
How could I do the vertical alignment ?
564
You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
To just center the text inside an element, use text-align: center; This text is centered.
To Horizontally centered the <div> element: We can use the property of margin set to auto i.e margin: auto;. The <div> element takes up its specified width and divides equally the remaining space by the left and right margins.
Answer: Use the CSS margin property If you would like to center align a <div> element horizontally with respect to the parent element you can use the CSS margin property with the value auto for the left and right side, i.e. set the style rule margin: 0 auto; for the div element.
Horizontal centering is only possible if the element's width is known, else the browser cannot figure where to start and end.
#content { width: 300px; margin: 0 auto; } This is perfectly crossbrowser compatible.
Vertical centering is only possible if the element is positioned absolutely and has a known height. The absolute positioning would however break margin: 0 auto; so you need to approach this differently. You need to set its top and left to 50% and the margin-top and margin-left to the negative half of its width and height respectively.
Here's a copy'n'paste'n'runnable example:
<!doctype html> <html lang="en"> <head> <title>SO question 2935404</title> </head> <style> #content { position: absolute; width: 300px; height: 200px; top: 50%; left: 50%; margin-left: -150px; /* Negative half of width. */ margin-top: -100px; /* Negative half of height. */ border: 1px solid #000; } </style> <body> <div id="content"> content </div> </body> </html> That said, vertical centering is usually seldom applied in real world.
If the width and height are really unknown beforehand, then you'll need to grab Javascript/jQuery to set the margin-left and margin-top values and live with the fact that client will see the div quickly be shifted during page load, which might cause a "wtf?" experience.
147
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
