flex布局上下左右居中

<!--
 * @Author: TSR
 * @Date: 2021-04-22 15:36:19
 * @LastEditTime: 2021-04-22 18:17:18
 * @Description: 
 * @FilePath: \J20210422\index.html
-->

 

<!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>file</title>
    <link rel="stylesheet" href="http://wechat.billboardpr.com/Wechatpush/js/normalize.css">
    <style>

.box {
display: flex;
align-items: center;
justify-content: center;

width: 500px; height: 300px; border: 2px dotted rgb(96, 139, 168);

}

.box div {
width: 100px;
height: 100px;

border: 2px solid rgb(96, 139, 168); border-radius: 5px; background-color: rgba(96, 139, 168, .2);

}

    </style>
</head>
<body>

<div class="box">
<div></div>
</div>

</body>
</html>

 

 

posted @ 2021-04-22 18:19  mtm1996y  阅读(236)  评论(0)    收藏  举报