EN
CSS - center text inside element using flexbox
0 points
In this article, we would like to show you how to center text inside element using flexbox in CSS.
Quick solution:
xxxxxxxxxx1
.container {2
display: flex;3
justify-content: center;4
align-items: center;5
}
In this example, we use flexbox to center text inside the container.
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; /* <----- required */14
justify-content: center; /* <----- required */15
align-items: center; /* <----- required */16
}17
18
.item {19
color: white;20
}21
22
</style>23
</head>24
<body>25
<div class="container">26
<div class="item">item</div>27
</div>28
</body>29
</html>