Home > Article > Web Front-end > Align flex items to center of container using CSS

Align flex items to center of container using CSS

WBOYforward: 2023-09-19 14:57:04770browse

Align flex items to the center using the justify-content property with a value of center.

Example

You can try running the following code to achieve the center value

Live Demonstration

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            background-color: red;
            justify-content: center;
         }
         .mycontainer > div {
            background-color: #F1C40F;
            text-align: center;
            line-height: 60px;
            font-size: 30px;
            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 center of container using CSS. For more information, please follow other related articles on the PHP Chinese website!

css flex

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Zoom HTML5 canvas to mouse cursorNext article：Zoom HTML5 canvas to mouse cursor

See more

Align flex items to center of container using CSS

Example

Related articles