Home >Web Front-end >CSS Tutorial >Align Flex items to middle of container in CSS
Align Flex items to middle of container in CSS
- WBOYforward
- 2023-09-17 10:57:101368browse
Use the align-items attribute with a value of center to center align the flex items.
Example
You can try running the following code to achieve the center value
Real-time demonstration
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: orange;
align-items: center;
height: 150px;
width: 600px;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 25px;
width: 100px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class = "mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
</div>
</body>
</html>The above is the detailed content of Align Flex items to middle of container in CSS. For more information, please follow other related articles on the PHP Chinese website!
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article："How does CSS work behind the scenes?"Next article："How does CSS work behind the scenes?"