垂直居中在面试中经常见到的题目。总结几种，希望大家多多指教。
。。。。
<sytle>
.box{
width:100px;
height:100px;
border;1px solid red;
position:relative; //父集相对定位
}
.box1{
width:50px;
height:50px;
border:1px solid #000;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
1.常用水平垂直居中。
.box1{
position:absolute;
left:50%;
top:50%;
margin-left:-25px; /*本身宽度的1\2*/
margin-top:-25px; /*本身高度的1\2*/
}
2.第二种水平垂直居中。
.box1{
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
}
3.第三种水平垂直居中。
.box1{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);/*运用css3位移调整* /
}
4.第四种水平垂直居中。
.box1{
display:inline-block; //这个要求父集宽度高度比子集越大，越接近垂直居中，相差太少最好不要用
widht：50px;
heihgt:50px;
}
时间： 2024-12-28 13:59:01