flex布局实现垂直居中

全栈程序员站长

发布于 2022-08-12 17:59:24

1.2K0

发布于 2022-08-12 17:59:24

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

使用flex布局实现居中布局的步骤：

父级元素使用flex布局
父级元素使用align-items: center;

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style> .a { 
     display: flex; /* 垂直居中 */ align-items: center; background-color: royalblue; height: 100px; } .a .one { 
     background-color: aqua; height: 20px; } .a .two { 
     margin-left: auto; background-color: red; height: 20px; } </style>
  </head>
  <body>
    <div class="a">
      <div class="one">111111111111111111</div>
      <div class="two">222222222222222222</div>
    </div>
  </body>
</html>

效果：