Center by absolute position work fine in Chrome but not in latest versions of IE and Firefox

Asked Jul 15 '19 at 09:02

Active Jul 15 '19 at 09:05

Viewed 24 times

I want to center this headline vertically:

<div class="headline>
    <div class="field-wrapper">
       <h1>Pressrelease</h1>
    </div>
</div>

... by using absolute posiitioning like this:

.headline {
    position: relative;
}    
.field-wrapper{
        position: absolute;
        top: 0px;
        bottom: 0px;
        margin-top: auto;
        margin-bottom: auto;
    }

This works in (latest versions of) Chrome but not in Firefox and IE. What do I need to do to center vertically in all browsers?

asked Jul 15 '19 at 09:02

TBJ

You can use flex :) – vAhy_The Jul 15 '19 at 09:04
@vAhy_The Flex isn't supported in IE... – Praveen Kumar Purushothaman Jul 15 '19 at 09:07
Thanks guys, the second answer in this question (https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) did the trick for me. Problem solved. – TBJ Jul 15 '19 at 09:13
You need to add this also .field-wrapper { display:flex;align-items:center; } and also add this .headline{ height : 100%;} – Vinee Jul 15 '19 at 09:18
@PraveenKumarPurushothaman for how old ie you develop ?? – vAhy_The Jul 15 '19 at 10:14
@vAhy_The Some banks still use IE 6. Some fintech firms still support IE 7. Hope that helps! – Praveen Kumar Purushothaman Jul 15 '19 at 10:17

Center by absolute position work fine in Chrome but not in latest versions of IE and Firefox

0 Answers0