EN
CSS - center child element vertically using flexbox (column direction)
3 points
In this article, we would like to show you how in CSS, center an element vertically using flexbox when elements are ordered in the column direction (flex-direction: column;).
Quick solution:
xxxxxxxxxx1
.container {2
display: flex;3
flex-direction: column;4
justify-content: center;5
}Screenshot:
In this example, we're using a flexbox with the justify-content property to vertically center the item inside the flex container.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.container {7
border-radius: 10px;8
background: #3085d6;9
width: 200px;10
height: 200px;11
box-shadow: 5px 5px 15px gray;12
13
display: flex; /* <----- required */14
flex-direction: column; /* <----- required */15
justify-content: center; /* <----- required */16
}17
18
.item {19
margin: 2px;20
width: 50px;21
height: 50px;22
border: 1px solid black;23
border-radius: 5px;24
background: #ffc353;25
}26
27
</style>28
</head>29
<body>30
<div class="container">31
<div class="item"></div>32
</div>33
</body>34
</html>