Web开发编程网
分享Web开发相关技术

水平垂直居中的几种写法

这个CSS问题在面试中经常会问到,下面总结一下:
给出如下html:

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

要想让类名为box的div水平垂直居中与外部的div,有以下几种写法:

①方法一:定位和需要定位的元素的margin减去宽高的一半

.container{ 
width: 300px; 
height: 300px; 
background:#e9dfc7; 
border:1px solid red; 
position: relative; 
} 
.box{ 
width: 100px; 
height: 150px; 
position: absolute;
 top: 50%; 
left: 50%;
-top: -75px; 
margin-left: -50px; 
}

②方法二:定位和margin:auto

.container{
width: 300px;
height: 300px;
background:#e9dfc7; 
border:1px solid red;
position: relative;

}
.box{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}

③方法三:绝对定位和transfrom

.container{
width: 300px;
height: 300px;
background:#e9dfc7; 
border:1px solid red;
position: relative;

}
.box{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

④方法四:diplay:table-cell

.container{
width: 300px;
height: 300px;
background:#e9dfc7; 
border:1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.box{
width: 100px;
height: 150px;
/*margin: 0 auto;*/ 这个也行
}

⑤方法五:flexBox居中

.container{
width: 300px;
height: 300px;
background:#e9dfc7; 
border:1px solid red;
display: flex;
justify-content: center;
align-items:center;
}
box{
width: 150px;
height: 100px;
}
未经允许不得转载:WEB开发编程网 » 水平垂直居中的几种写法
微信扫码关注微信公众号

WEB开发编程网

谢谢支持,我们一直在努力

安全提示:您正在对WEB开发编程网进行赞赏操作,一但支付,不可返还。