Home > Article > Web Front-end > How to Vertically Center Text in Dynamically Height Divs?
Vertical Text Alignment in Dynamically Height Divs
When tailoring website elements to user-adjustable browser heights, it's often essential to ensure the vertical alignment of text within dynamic height divs remains centered. How can this be achieved?
Consider the following HTML structure:
<body> <div>
To vertically align the
Solution: Leverage the display property to set the wrapper
Example Code:
HTML
<body> <div>Text
CSS
body {width: 100%; height: 100%;} /* for visual demonstration of div height...*/ div { position:absolute; height:100%; width:100%; display: table; } h1 { display: table-cell; vertical-align: middle; text-align:center; }
This approach has been tested on various browsers and platforms, including:
Tested Systems:
Tested Browsers:
The above is the detailed content of How to Vertically Center Text in Dynamically Height Divs?. For more information, please follow other related articles on the PHP Chinese website!