[Solved] How can I center my text with position absolute!?

[cscodismith]

Hello, What I need to do is center my text above an image but at the same time I need it centered to the screen. Please give me your input on what will solve this!

HTML:

<div class="section>
        <h1>HeartFX Solutions</h1>
        <img class="image" src="includes/img/macbook.png" width="100%" alt="macbook_image">
</div>

CSS:

.image { 
 }
 
.section h1 {
    position: absolute;
    z-index: 100;
    color: black;
    text-align: center;
    font-size:48px;
    font-family: 'Mr Dafoe', cursive;
    }

My result

[shaneisme]

When you give a block element position: absolute, it loses its default width: 100% since it leaves the flow… so maybe give it a width?

If that doesn’t work, set up a Codepen so we can see what you’re doing.

[cscodismith]

The codepen of it can be found here

[shaneisme]

Ah, got it.

If you wanted to just horizontally center, add this to the h1 styles:

left: 50%;
transform: translateX(-50%);

If you wanted it both vertically and horizontally (you would need to have its parent declare a height) do this:

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

P.S. – a quick note on transform browser compat. http://caniuse.com/#feat=transforms2d

[cscodismith]

This worked perfectly, thank you very much Shane.

Best regards,
Codi

[Author]

Posts