Unordered and Ordered Lists with Auto-Increment Using Pseudoclasses
July 25, 2024
Tooltip with Positioning (Top, Bottom, Left, Right)
July 26, 2024

July 25, 2024

Center elements with flexbox

Table of contents

Flexbox, or the Flexible Box Layout, is a powerful CSS module that allows for efficient and intuitive layout design. When it comes to centering elements, flexbox provides a straightforward and versatile solution. By setting the container’s display property to flex and using justify-content: center and align-items: center, you can easily center any child elements both horizontally and vertically.

HTML

<div class="sf-wrapper">

    <div>Centered element</div>

</div>

CSS

/* ---------------------------------------------------------- */
/*                 Snippflow Centering elements               */
/* ---------------------------------------------------------- */

.sf-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    padding: 40px;
    box-sizing: border-box;
}
/* Example div */
.sf-wrapper > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 250px;
    background-color: #46A787;
    color: #fff;
    border-radius: 8px;
    box-shadow: 6px 10px 20px 0px rgba(0,0,0,.1);
}

Result:

See the Pen Center elements with flexbox by Snippflow (@snippflow) on CodePen.

Table of contents

Advert

Leave a Reply

Your email address will not be published. Required fields are marked *

Center elements with flexbox
This website uses cookies to improve your experience. By using this website you agree to our Data Protection Policy.
Read more