CSS元素上下左右居中的⼏种⽅式
CSS元素上下左右居中的⼏种⽅式
假设以以下⽗⼦元素实现上下左右居中为例：
<div class='father'>
<div class='son'>
</div>
</div>
<style>
.father{
width:200px;
height:200px;
}
.son{
width:100px;
height:100px;
}
</style>
⽅式⼀
这个⽅法⽐较推荐，就算⽗元素宽⾼不确定也能实现垂直⽔平居中效果，但由于使⽤了css3的新属性，在低版本ie浏览器下是不兼容的（不会还有⼈⽤ie叭，不会叭，不会叭）。
.father{
width: 200px;
height: 200px;
position: relative;
}
.son{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
⽅式⼆
与⽅法⼀类似，但⽗元素需要确认宽⾼，⼦元素通过绝对定位，top、left分别设为50%，然后通过设置margin-top、margin-left值为宽度的⼀半（负数），就可以成功实现垂直⽔平居中了。
.father{
width: 200px;
height: 200px;
position: relative;
}
.son{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top:50%;
margin-left: -50px;
margin-top: -50px;
}
⽅式三
这个⽅法，不仅能在内部宽度不确定时发挥作⽤，还能兼容各种主流浏览器，看上去似乎很完美，但事实上，当我们的需求改为：宽度随内部⽂字⾃适应 ，即宽度未设置时，这种⽅法就⽆法满⾜需求了，原因是left、right设为0后，inner在宽度未设置时将占满⽗元素的宽度。
.father{
width: 200px;
css设置文字垂直居中
height: 200px;
position: relative;
}
.son{
width: 100px;
height: 100px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
⽅式四
使⽤flex布局，这种⽅法也是⽐较推荐，代码量相⽐其他⽅式更少，但ie兼容差。
.father{
width: 200px;
height: 200px;
display: flex;
justify-content:center;
align-items:center;
}
.son{
width: 100px;
height: 100px;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。