1.关于如何水平垂直居中

原创 15801206036 随笔 css 185阅读 2017-12-14 14:52:48 举报

html:<div class="div1"><div class="div2"></div></div>
style:
1:使用flex;
div1:{
width:400px;
height:400px;
border:1px solid #ccc;
display:flex;
justify-content:center;
align-items:center;
}
div2{
width:100px;
height:100px;
background:red;
}
2.position配合margin
div1{
position:relative;
width:400px;
height:400px;
border:1px solid #ccc;
}
div2{
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
width:100px;
height:100px;
background:red;
}
用这个得固定div的大小
3.定位和transform
div1{
position:relative;
width:400px;
height:400px;
border:1px solid #ccc;
}
div2{
position:absolute;
left:50%;
top:50%;
transform:translateX(-50%);
transform:translateY(-50%);
width:100px;
height:100px;
background:red;
}
这个div2可以是任意大小
4.table-cell
div1:{
width:400px;
height:400px;
border:1px solid #ccc;
text-align:center;
display:table-cell;
verticle-align:middle;
}
div2{
width:200px;
height:200px;
display:inline-block;
background:red;
}
纯手打,如有错字不要见怪

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复