<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centering Image in CSS: Flexbox -- flex-self</title>
</head>
   
<body>
    <main>
        <aside>
            <!-- Header -->
            <section>                
                <p> Centering Image in CSS: Flexbox -- flex-self</p>
            </section>

            <!-- Body -->
            <section>
                <div>
                    <img src="https://user-images.githubusercontent.com/78242022/283794566-f2111e6a-b8be-47c0-a12f-d4db30793ebf.jpg" alt="">
                </div>

                <div>
                    <img src="https://user-images.githubusercontent.com/78242022/283794566-f2111e6a-b8be-47c0-a12f-d4db30793ebf.jpg" alt="">
                </div>

                <div>
                    <img src="https://user-images.githubusercontent.com/78242022/283794566-f2111e6a-b8be-47c0-a12f-d4db30793ebf.jpg" alt="">
                </div>
            </section>

        </aside>
    </main>
</body>
</html>
        :root {
        --transparent: rgba(1, 1, 1, 0);

        --black-0: #010101;
        --black-1: #111317;
        --black-2: #22262e;
        --black-3: #2b2f39;

        --gray-0: #6e7a92;
        --gray-1: #f4f5f8;
        --gray-2: #d3d7de;
        --gray-3: #a6aebc;

        --gradient-1: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 50%, rgba(0,212,255,1) 100%);
    }
        body {
            width: 100vw;
            height: 100vh;
            background-color: var(--gray-2);
        }
        aside {
            background-color: var(--gray-1);
            width: 80%;
            margin: 1em auto;
            border-radius: 1em;
            padding-bottom: 2em;
        }

        section:first-child {
            width: 80%;
            border-radius: 1em;
            margin: 3em auto 0;
            line-height: 4em;
            background: var(--gradient-1);
        }

        p {
            color: var(--gray-1);
            text-align: center;
            font-family: calibri;
            font-size: 2em;
        } 

        section:last-child {
            display: flex;
            justify-content: center;
            gap: 3em;
            width: 80%;
            height: 20em;
            margin: 2em auto;
            border-radius: 1em;
            border: 1px solid var(--gray-0);
        }

        div {
            width: 120px;
        }

        img {
            width: 100%;
            border-radius: 10px;
        }

        div:nth-child(1) {
            align-self: start;
        }

        div:nth-child(2) {
            align-self: center;
        }

        div:nth-child(3) {
            align-self: end;
        }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.