html - How can I vertically center text in a dynamically height div?

Question

Welcome To Ask or Share your Answers For Others

html - How can I vertically center text in a dynamically height div?

asked Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - How can I vertically center text in a dynamically height div?

<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 of the div tag, no matter how tall the div element is? i.e. If the user changes his browser height, I want the h1 to vertically align in the center, according to the new height.

Thanks.

question from:https://stackoverflow.com/questions/10939288/how-can-i-vertically-center-text-in-a-dynamically-height-div

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-06T17:30:28+0000

The best solution I've ever encountered is to make use of the display property and set the wrapper element as a table to allow the usage of vertical-align:middle on the element to be centered:

See this working Fiddle Example!

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;
}

TESTED 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)

Categories

html - How can I vertically center text in a dynamically height div?

html - How can I vertically center text in a dynamically height div?

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

TESTED ON

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags