今天教大家用多个div实现多个方块居中嵌套的实例。本例用到了flex布局里的justify-content属性和align-items属性，此方法较为方便快捷，不用多次去设置div的内外边距，其次还涉及到border边框的一些应用。
<!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>花样边框</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
display: flex;
justify-content: center;
align-items: center;
}
.one{
width: 450px;
height: 450px;
border: 3px dotted black;
margin: 20px auto;
}
.two{
width: 400px;
height: 400px;
border: 3px solid gray;
}
.three{
width: 350px;
height: 350px;
background-color: rgb(150, 48, 48);
}
.four{
width: 280px;
height: 280px;
border: 2px dotted white;
}
.five{
width: 250px;
height: 250px;
border: 2px dotted white;
}
.six{
width: 200px;
height: 200px;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="one">
<div class="two">
<div class="three">
<div class="four">
<div class="five">
<div class="six"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>最后效果：
版权声明：本文为ZB_0826原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。