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:
xxxxxxxxxx1
.container {2
display: flex;3
align-items: center;4
justify-content: center;5
}
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:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.container {7
background-color: #3085d6;8
height: 200px;9
width: 200px;10
border-radius: 10px;11
box-shadow: 5px 5px 15px gray;12
13
display: flex;14
align-items: center;15
justify-content: center;16
}17
18
.item {19
height: 50px;20
width: 50px;21
background-color: rgb(255, 195, 83);22
box-shadow: 1px 1px 2px black;23
border: 1px solid black;24
border-radius: 5px;25
}26
27
</style>28
</head>29
<body>30
<div class="container">31
<div class="item"></div>32
</div>33
</body>34
</html>