Unordered and Ordered Lists with Auto-Increment Using Pseudoclasses
July 25, 2024Tooltip with Positioning (Top, Bottom, Left, Right)
July 26, 2024Flexbox, 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.