How to centralize text and title using CSS?

Hello everyone.

I would like to know how can i centralize content using CSS? It may be simple for you but almost all of my projects i have the same problem. The title of the page always doesn’t be centralized whatever it takes.

I have reviewed other projects and i have seen that other students don’t use media queries to fix that, as i tough was the issue. However, i don’t know what to do to fix it . I just was using normal code in css to positioning them such as : .hero{position:absolute; width:1200px; margin-top:0;}.

This is my effort to fix the positioning of the head of the webpage. I will live the link of one of my projects that i did together with a friend.

thank you.

your pen has both a ‘head’ and a ‘header’ which one did you want to center?

If you want to center the ‘head’ tag, then there is nothing that css can do as it is just a meta tag. (doesn’t appear on the page)

<div class="hero"><h1>Subscribe Now!</h1>

following by the buttons:

<div class="hero"><h1>Subscribe Now!</h1>
                <div class="button">
                    <a href="" class="btn btn-one">watch video</a>
                    <a href="" class="btn btn-two">Explore More</a>
                </div>
            </div>

Just do this ,

.hero {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
:slight_smile:

I am interested to know if @Sujith3021 suggestion worked for you. Pls update when you try.

yest it worked. I allocated them together with the remaining code and Vuala. Thank you Sujith3021.

1 Like

You are welcome.! @Oliver_Olivier… Happy Coding :wink:

2 Likes