div布局居中—四种方法

  • 2017-10-29
  • 0
  • 0

html

方法一(使用绝对布局):
.father{
width:500px;
height:500px;
position:relative;
background-color:red;
}
.son{
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
background-color:black;
}

方法二(使用table-cell形式)
.father{
width:500px;
height:500px;
display:table-cell;
text-align:center;
vertical-align:middle;
background-color:red;
}
.son{
width:200px;
height:200px;
display:inline-block; ps:这句话一定要加,不然没效果哦
background-color:black;
}

方法三(使用弹性布局flex)
.father{
width:500px;
height:500px;
display:flex;
justify-content:center; 内容水平居中
align-items:center; 内容垂直居中
background-color:red;
}
.son{
width:200px;
height:200px;
background-color:black;
}

方法四(使用绝对布局)
.father{
width:500px;
height:500px;
display:relative;
background-color:red;
}
.son{
width:200px;
height:200px;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
background-color:black;
}

评论

还没有任何评论,你来说两句吧