EN
CSS - center element using flexbox
0
points
In this article, we would like to show you how to center element using flexbox in CSS.
Quick solution:
.container {
display: flex;
align-items: center;
justify-content: center;
}
Practical example
In this example, we center div element inside flex container using two CSS properties:
align-items- specifies how items are laid out along the cross axis,justify-content- specifies how the browser distributes space between and around content items along the main axis.
Runnable example:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.container {
background-color: #3085d6;
height: 200px;
width: 200px;
border-radius: 10px;
box-shadow: 5px 5px 15px gray;
display: flex;
align-items: center;
justify-content: center;
}
.item {
height: 50px;
width: 50px;
background-color: rgb(255, 195, 83);
box-shadow: 1px 1px 2px black;
border: 1px solid black;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
</div>
</body>
</html>