<div class="container">
<div class="content">div.content</div>
</div>
.container{
width:200px;
height:100px;
background-color:lightskyblue
}
.content{
width:100px;
height:100px;
background-color:lightpink;
}
文档流默认是水平文档流,元素从左到右从上到下排列。
margin:auto的应用
结合position:absolute;top:0;bottom:0;left:0;right:0
实现块级元素内块级元素的水平垂直居中。
<body>
<div class="container">
<div class="content">div.content</div>
</div>
</body>
.container{
width:200px;
height:200px;
background-color:lightskyblue;
position: relative;
}
.content{
width:100px;
height:100px;
background-color:lightpink;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}