How can I vertically center text at a dynamic div height?
<body> <div style="position:absolute; height:100%; width:100%;"> <h1 style="text-align:center;">Text</h1> </div> </body> How can I vertically center the h1 tag inside a div tag, no matter how tall the div element is? those. if the user changes the height of his browser, I want h1 to be vertically aligned in the center according to the new height.
Thank.
The best solution I've ever come across is to use the display property and set the shell element to table to allow the use of vertical-align:middle to center the element:
See this working example script !
HTML
<body> <div> <h1>Text</h1> </div> </body> CSS
body {width: 100%; height: 100%;} /* this is just to "view" the div height...*/ div { position:absolute; height:100%; width:100%; display: table; } h1 { display: table-cell; vertical-align: middle; text-align:center; } TEST ON
Windows XP Profissional versão 2002 Service Pack 3
- Internet Explorer 8.0.6001.18702
- Opera 11.62
- Firefox 3.6.16
- Safari 5.1.2
- Google Chrome 18.0.1025.168 m
Windows 7 Home Edition Service Pack 1
- Internet Explorer 9.0.8112.164211C
- Opera 11.62
- Firefox 12.0
- Safari 5.1.4
- Google Chrome 18.0.1025.168 m
Linux Ubuntu 12.04
- Firefox 12.0
- Chromium 18.0.1025.151 (Developer Build 130497 Linux)
The answer, which I find the least intrusive and least confusing, requires the insertion of the <span> before the <h1> element: http://jsfiddle.net/Wexcode/axRxE/
HTML:
<div> <span></span><h1>Text</h1> </div> CSS
div { text-align: center; /* horizontally center */ } div span { height: 100%; vertical-align: middle; display: inline-block; } div h1 { vertical-align: middle; display: inline-block; } Deploying this method for vertical alignment with the height of the browser: http://jsfiddle.net/Wexcode/axRxE/1/
<body> <div style="position:absolute; height:100%; width:100%;"> <h1 style="text-align:center; height:20px; position:relative; top:50%; margin-top:-10px;">Text</h1> </div> </body> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- body { background-color: #0c0c0c; } .object { background-color: #666666; height: 350px; width: 600px; } .verticalCenter { width:600px; height:350px; position:absolute; left:50%; top:50%; margin:-175px 0 0 -300px; } --> </style> </head> <body> <div class="verticalCenter"> <div class="object">cetnered</div> </div> </body> </html> You must set the height and width in the .verticalCenter class in the same way as for your object (div, flash, image, text), which should be centered. And the fields should be half of these heights and widths.
I do not think there is a solution if you dynamically change this object. If maybe with javascripts.
Here's a pretty simple solution. This is mainly based on setting display:table-cell and choosing vertical alignment as the average.
HTML:
<div id="vertical"> <p>this text is vertically centered. It long enough to wrap, and should work for any size chunk of content.</p> <p>Heck, it even works with multiple items in the middle.</p> </div> CSS
#vertical { display:table-cell; vertical-align:middle; height: 500px; width: 300px; } JSFiddle: http://jsfiddle.net/6Re3E/1/
In a cross browser (desktop), you can do this with CSS2 + CSS3 and without Javascript.
Works in
- IE5 +
- Gecko (Mozilla, Firefox, Netscape 7)
- Opera 7 +
- Konqueror 3+
- Webkit Browsers (Safari, Google Chrome)
- and much more (mobile browsers not tested)
Documentation: vertical centering in CSS Final solution with unknown height:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html <br / ">
Clear jsFiddle example : http://jsfiddle.net/WYgsP/
HTML
<div class="outerBox"> <div class="helper"> <div class="boxWithUnknownHeight"> any text<br> any height<br> any content, for example generated from DB<br> everything is vertically centered </div> </div> </div> CSS
.outerBox { display: table; height: 400px; #position: relative; /* ie hack */ overflow: hidden; border: 1px solid red; } .helper { #position: absolute; /* ie hack */ #top: 50%; /* ie hack */ display: table-cell; vertical-align: middle; } .boxWithUnknownHeight { #position: relative; /* ie hack */ #top: -50%; border: 1px solid green } It works even if I add text and line breaks through Firebug etc.
To keep your CSS clean of invalid CSS hacks, I recommend that you use conditional comments for it and create separate CSS with the browser specific code.
How vertical centering with unknown height exactly works and why: Detailed description
Other solutions display: table and display: table-cell and / are absolute positioning here .
I have the simplest 3 lines of css that are going to blow your mind, and you will think: "Why I did not think about it initially." Use this on the element you want to center vertically, and the parent container simply adds 100% height.
position: relative; top: 50%; transform: translateY(-50%); The position can be both relative, absolute, and fixed.
I use tables for everything. I personally don't like to use display: table or something like that when there is something that already exists.
<table style="width: 100%; height: 100%;"> <tr> <td> <!-- Whatever you want vertically and horizontally centered --> </td> </tr> </table> Using the same method, you can do something like this for your case:
<div id="container-div" style="position: relative"> <div id="random-content-that-changes-container-height-and-width" style="height: 600px; width: 400px;"> <div style="position: absolute; top: 0; right: 0; left: 0; bottom: 0"> <table style="width: 100%; height: 100%;"> <tr> <td> <!-- Whatever you want vertically and horizontally centered --> </td> </tr> </table> </div> </div> From my point of view, div not an appropriate choice in this case. My suggestion is to go for table and vertical-align style on it td s.