CSS中常⽤的定位居中实现⽅式页⾯HTML代码部分
<style>
.wrap{
width: 300px;
height: 300px;
background-color: antiquewhite;
border: 1px solid #333;
}
.content{
width: 200px;
height: 200px;
background-color:cadetblue;
}
</style>
<body>
<div class="wrap">
<div class="content">
<span class="con">--居中--</span>
</div>
</div>
</body>
效果图如下
⼀. 常⽤居中⽅法
1. ⾏内元素居中：
⽔平居中，⽗元素设置 **text-align: center;**属性即可
.content{
width: 200px;
height: 200px;
background-color:cadetblue;
text-align: center;
overflow: hidden;
}
.con{
background-color: burlywood;
}
⽗元素设置 **line-height: 200px;**属性，具体的属性值为height的值，可以实现⾏内元素垂直⽅向上居中显⽰。
.content{
width: 200px;
height: 200px;
background-color:cadetblue;
text-align: center;
line-height: 200px;
overflow: hidden;
}
2. 块状元素
margin左右⽅向：auto 可以使标签⽔平⽅向居中
.content{
width: 200px;
height: 200px;
background-color:cadetblue;
text-align: center;
line-height: 200px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
3. ⽗级元素设置相对定位或绝对定位，⽬标元素设置绝对定位，+ margin 设置可以实现⽔平垂直居中
margin-left / margin-right 设置为width 的⼀半，取负值；
margin-top / margin-bottom 设置为height 的⼀半，取负值； 这种设置⽅法为 width，height 固定已知的情况下。
.wrap{
width: 300px;
height: 300px;
background-color: antiquewhite;
border: 1px solid #333;
position: relative;
}
.content{
width: 200px;
height: 200px;
background-color:cadetblue;
text-align: center;
line-height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
4. 绝对定位 + transform width，height 未知可以实现⽔平垂直居中
.wrap{
width: 300px;
height: 300px;
background-color: antiquewhite;
border: 1px solid #333;
position: relative;
}
.content{
/* width: 200px;
height: 200px; */
background-color:cadetblue;
text-align: center;
line-height: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
上图设置了 line-height 属性，⾼度可以看到，不设置 line-height ，⽬标元素将有内容撑开。
translate属性可以设置⽔平，垂直2个⽅向，
translateY属性直接设置垂直⽅向；translateX直接设置⽔平⽅向；可以通过这2个属性结合以上内容，直接让⽬标元素⽔平，或垂直⽅向居中。
5. 定位+margin 设置
css固定定位⽬标元素设置为绝对定位，top ，right， bottom，left 分别设置为0，margin设置为auto
.wrap{
width: 300px;
height: 300px;
background-color: antiquewhite;
border: 1px solid #333;
position: relative;
}
.content{
width: 200px;
height: 200px;
background-color:cadetblue;
text-align: center;
line-height: 200px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}

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