Community

Learn

Tools Library

AI Tools

Leisure

English

Home > Web Front-end > CSS Tutorial > Align Flex items to middle of container in CSS

Align Flex items to middle of container in CSS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Release： 2023-09-17 10:57:10

forward

1403 people have browsed it

在 CSS 中将 Flex 项目对齐在容器的中间

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>

Copy after login

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!

Previous article："How does CSS work behind the scenes?" Next article：CSS adjust content

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn