Menu
How do I center content in a div both horizontally and vertically?
238
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 center text in CSS, use the text-align property and define it with the value 'center. ' You can use this technique inside block elements, such as divs. You can also center text in HTML, which is useful if you only want to center individual elements on the page on a case-by-case basis.
Add CSS. Set the top and left properties to 50% to center the left-top corner of the <div>. Set the margin-top and margin-left properties to the negative half of the height and width of the <div>.
To align horizontally it's pretty straight forward:
<style type="text/css"> body { margin: 0; padding: 0; text-align: center; } .bodyclass #container { width: ???px; /*SET your width here*/ margin: 0 auto; text-align: left; } </style> <body class="bodyclass "> <div id="container">type your content here</div> </body> and for vertical align, it's a bit tricky: here's the source
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Universal vertical center with CSS</title> <style> .greenBorder {border: 1px solid green;} /* just borders to see it */ </style> </head> <body> <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;"> <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;"> <div class="greenBorder" style=" #position: relative; #top: -50%"> any text<br> any height<br> any content, for example generated from DB<br> everything is vertically centered </div> </div> </div> </body> </html> There are several options available*:
*Disclaimer: This list may not be complete.
Using Flexbox
Nowadays, we can use flexbox. It is quite a handy alternative to the css-transform option. I would use this solution almost always. If it is just one element maybe not, but for example if I had to support an array of data e.g. rows and columns and I want them to be relatively centered in the very middle.
.flexbox { display: flex; height: 100px; flex-flow: row wrap; align-items: center; justify-content: center; background-color: #eaeaea; border: 1px dotted #333; } .item { /* default => flex: 0 1 auto */ background-color: #fff; border: 1px dotted #333; box-sizing: border-box; }<div class="flexbox"> <div class="item">I am centered in the middle.</div> <div class="item">I am centered in the middle, too.</div> </div>Using CSS 2D-Transform
This is still a good option, was also the accepted solution back in 2015. It is very slim and simple to apply and does not mess with the layouting of other elements.
.boxes { position: relative; } .box { position: relative; display: inline-block; float: left; width: 200px; height: 200px; font-weight: bold; color: #333; margin-right: 10px; margin-bottom: 10px; background-color: #eaeaea; } .h-center { text-align: center; } .v-center span { position: absolute; left: 0; right: 0; top: 50%; transform: translate(0, -50%); }<div class="boxes"> <div class="box h-center">horizontally centered lorem ipsun dolor sit amet</div> <div class="box v-center"><span>vertically centered lorem ipsun dolor sit amet lorem ipsun dolor sit amet</span></div> <div class="box h-center v-center"><span>horizontally and vertically centered lorem ipsun dolor sit amet</span></div> </div>Note: This does also work with
:afterand:beforepseudo-elements.
Using Grid
This might just be an overkill, but it depends on your DOM. If you want to use grid anyway, then why not. It is very powerful alternative and you are really maximum flexible with the design.
Note: To align the items vertically we use flexbox in combination with grid. But we could also use
display: gridon the items.
.grid { display: grid; width: 400px; grid-template-rows: 100px; grid-template-columns: 100px 100px 100px; grid-gap: 3px; align-items: center; justify-content: center; background-color: #eaeaea; border: 1px dotted #333; } .item { display: flex; justify-content: center; align-items: center; border: 1px dotted #333; box-sizing: border-box; } .item-large { height: 80px; }<div class="grid"> <div class="item">Item 1</div> <div class="item item-large">Item 2</div> <div class="item">Item 3</div> </div>CSS article about grid
CSS article about flexbox
CSS article about centering without flexbox or grid
45
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
