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:
.container {
display: flex;
justify-content: center;
align-items: center;
}
Practical example
In this example, we use flexbox to center text inside the container.
// 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; /* <----- required */
justify-content: center; /* <----- required */
align-items: center; /* <----- required */
}
.item {
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="item">item</div>
</div>
</body>
</html>