flex结合margin:auto定义包含项目居中显示

margin:auto;在伸缩盒中具有强大的功能,一个定义为“auto”的margin会合并剩余的空间,它可以用来把伸缩项目挤到其它位置。

  • 代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        body{
            margin:0;
            padding:0;
        }
        .flex-container{
            display:flex;
            height:100vh;
            background:yellowgreen;
        }
        .flex-item{
            margin:auto;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">
            <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度" width="200">
        </div>
    </div>
</body>
</html>
  • 显示效果
    这里写图片描述

猜你喜欢

转载自blog.csdn.net/sr_www/article/details/81270170