Is this a correct way of centering the div?

HTML-CSS
1

After completing the lesson (CSS Transforms by Building a Penguin), I tried to recreate the project on my own. I wasn’t able to center the penguin in such a way that even if I decrease the viewport width the penguin would have stayed in the centre because I reset margin every time I work with CSS.
So, in the end I created a special div just for centering the penguin (div’s class name is ‘for-centering’). It gave me the result that I wanted but now I am wondering whether it is a correct way of doing so. Like is it allowed to center things like this? Especially considering accessibility and stuff. Or even in general is it good practise to create a div only for centering something? Please let me know!

Here’s the HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles.css">
        <title>Flappy Penguin</title>
    </head>
    <body>
        <!-- <div class="sky"></div> -->
        <div class="mountain front"></div>
        <div class="mountain back"></div>
        <div class="sun"></div>
        <div class="for-centering">
            <div class="penguin">
                <div class="penguin-head">
                    <div class="face left"></div>
                    <div class="face right"></div>
                    <div class="chin"></div>
                    <div class="eye left">
                        <div class="eye-lid"></div>
                    </div>
                    <div class="eye right">
                        <div class="eye-lid"></div>
                    </div>
                    <div class="lip upper"></div>
                    <div class="lip lower"></div>
                    <div class="blush left"></div>
                    <div class="blush right"></div>
                </div>
                <div class="penguin-body">
                    <div class="neck"></div>
                    <div class="shirt">I 💜<br>CSS</div>
                    <div class="arm left"></div>
                    <div class="arm right"></div>
                    <div class="foot left"></div>
                    <div class="foot right"></div>
                </div>
            </div>
        </div>
        <div class="ground"></div>
    </body>
</html>

Here’s the CSS:

/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* SKY */
body {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(45deg, rgb(130, 207, 238), white);
    /* z-index: -1; */
    overflow: hidden;
}

/* GROUND */
.ground {
    width: 100%;
    height: 50%;
    background: linear-gradient(90deg, rgb(88, 175, 235), rgb(181, 251, 252));
    /* background-color: red; */
    position: absolute;
    bottom: 0;
}

/* SUN */
.sun {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: rgb(253, 247, 49);
    position: absolute;
    top: -75px;
    right: -75px;
}

/* MOUNTAINS */
.mountain {
    width: 400px;
    height: 400px;
    position: absolute;
}

.mountain.front {
    top: 60px;
    left: -200px;
    transform: skew(45deg);
    background: linear-gradient(90deg, rgb(87, 187, 251), rgb(201, 240, 229));
}

.mountain.back {
    top: 380px;
    left: 50px;
    transform: skew(-45deg, 45deg);
    background: linear-gradient(0deg, rgb(87, 187, 251) 60%, rgb(201, 240, 229));
    z-index: -1;
}

/* PENGUIN */
.for-centering {
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
}

.penguin {
    width: 300px;
    height: 300px;
    position: absolute;
    z-index: 1;
    transition: 1s ease-in-out;
}

.penguin * {
    position: absolute;
}

/* PENGUIN HEAD */
.penguin-head {
    width: 50%;
    height: 50%;
    /* border-radius: 50%; */
    border-radius: 100% 100% 90% 90%;
    background: linear-gradient(45deg, rgb(114, 113, 113) , rgb(226, 225, 225));
    top: 10%;
    left: 25%;
    z-index: 1;
}

.face {
    width: 60%;
    height: 70%;
    border-radius: 70%;
    background-color: white;
    top: 17%;
}

.face.left {
    left: 4%;
}

.face.right {
    right: 4%;
}

.chin {
    width: 80%;
    height: 48%;
    background-color: white;
    border-radius: 0% 0% 100% 100%;
    top: 45%;
    left: 10%;
}

.eye {
    width: 17%;
    height: 17%;
    background-color: black;
    top: 40%;
    border-radius: 50%;
}

.eye.left {
    left: 22%;
}

.eye.right {
    right: 22%;
}

.eye-lid {
    width: 130%;
    height: 100%;
    background-color: white;
    top: 20%;
    left: -14%;
    border-radius: 50%;
}

.lip {
    height: 9%;
    background-color: orange;
    border-radius: 50%;
}

.lip.upper {
    top: 58%;
    width: 20%;
    left: 40%;
}

.lip.lower {
    top: 62%;
    left: 42.5%;
    width: 15%;
}

.blush {
    width: 15%;
    height: 9%;
    background-color: pink;
    top: 65%;
    border-radius: 50%;
}

.blush.left {
    left: 17%;
    transform: rotate(-7deg);
}

.blush.right {
    right: 17%;
    transform: rotate(7deg);
}

/* PENGUIN BODY */
.penguin-body {
    width: 55%;
    height: 50%;
    border-radius: 80% 80% 100% 100%;
    background: linear-gradient(45deg, gray 0%, rgb(237, 237, 237) 25%, white 75%);
    top: 50%;
    left: 22%;
    /* z-index: 0; */
}

.neck {
    width: 60%;
    height: 60%;
    background-color: rgb(160, 160, 160);
    border-radius: 0% 0% 100% 100%;
    top: -15%;
    left: 21%;
}

.shirt {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1.5em;
    color: rgb(106, 105, 105);
    top: 50%;
    left: 37%;
}

.foot {
    width: 25%;
    height: 15%;
    background-color: orange;
    border-radius: 50%;
    bottom: -10%;
    z-index: -1;
}

.foot.left {
    left: 20%;
    transform: rotate(-10deg);
}

.foot.right {
    right: 20%;
    transform: rotate(10deg);
}

.arm {
    width: 60%;
    height: 35%;
    background: linear-gradient(15deg, rgb(114, 113, 113), rgb(226, 225, 225));
    z-index: -1;
    border-radius: 30% 10% 10% 100%;
}

.arm.left {
    top: 10%;
    left: -35%;
    transform: rotate(45deg);
    transform-origin: 100% 0%;
    animation: wave 3s infinite linear;
    /* animation-delay: 5s; */
}

.arm.right {
    top: 20%;
    right: -25%;
    transform: scaleX(-1) rotate(-45deg);
}

/* ANIMATION */
@keyframes wave {
    0% {
        transform: rotate(45deg);
    }

    10% {
        transform: rotate(25deg);
    }

    20% {
        transform: rotate(45deg);
    }

    30% {
        transform: rotate(25deg);
    }

    40% {
        transform: rotate(45deg);
    }
}

/* TRANSITION */
.penguin:active {
    transform: scale(1.5);
    cursor: not-allowed;
}
2

There are several ways to center things. I wouldn’t necessarily say that one method is better than the other. It depends on the HTML, the styling of containing elements, and what type of centering you need. Using flexbox to center both horizontally and vertically is a very common choice. And I don’t think there is anything wrong with adding a div for styling. That’s one of the things they are good for. Yes, there are some minimalists out there who will insist that you make your HTML as concise as possible. But anything can be taken to the extreme.

As far as accessibility is concerned, adding an extra div will have no effect. There is actually no content in this project, so the accessibility issue is that if a blind person using a screen reader were to go to this page, they would not get any information at all about what is on the page. To make it accessible you might add a text description of the animation you created. You could do this with just normal text below the animation. Or you could visually hide the text so only screen reader users would hear it but it would not be seen on the page.

1 Like
3

Oh wow so I can use divs for such purposes… pheww :sweat_smile: :sweat_smile:

Okay okay I see… I have better idea now about accessibility. I used to think that the screen reader would read the tags too (like the tag name, class names and stuff) which is why I was confused… but what you said about accessibility makes a lot more sense… and I could do that in projects like this that have no content. I’ll keep it in mind for future.

Thank you so much!!

4

In your case, the use of the ‘for-centering’ div ensures that the penguin remains centered even when the viewport size changes.

When it comes to accessibility, as long as the ‘for-centering’ div doesn’t interfere with the accessibility of the content within it, there shouldn’t be any issue. If the div provides a semantic meaning to the layout of the page, it could also improve accessibility by providing context to screen readers.

In conclusion, creating a special div for centering an element is a common and acceptable practice, and it’s up to you to decide if it’s the best solution for your specific use case.

1 Like
5

Oh, okay, thanks! That’s good to know.

1 Like
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.