html盒⼦居中的⽅式,CSS盒⼦居中三种⽅法
前⾔
CSS盒⼦居中，我觉得是很有必要学习⼀下的。特别是第三种⽅法，奇淫技巧升级版，也是⽣产环境中⾮常常见的⼀种⽅法，不需要知道宽度，随着祖先元素的变化⽽变化！
1.常规⽅法
常规⽅法只需要给盒⼦设置宽⾼，利⽤外边距让它居中！
常规⽅法
.box1{
width: 200px;
height: 200px;
margin: 0 auto;
background-color: pink;
}
2.奇淫技巧
奇淫技巧利⽤定位元素。将祖先元素设为相对定位，⼦级元素设为绝对定位。left设置为50%；margin-left设置为-宽度的⼀半。但是必须得设置宽度，并且得知道宽度值为多少！
奇淫技巧
.bigbox2{
position: relative
}
.bigbox2 .box2{
width: 200px;
height: 200px;
background-color: skyblue;
position: absolute;
left: 50%;
margin-left: -100px;
}
3.奇淫技巧升级版
奇淫技巧利⽤定位元素和CSS transform属性。将祖先元素设为相对定位，⼦级元素设为绝对定位。left设置为50%；transform设置为translate(-50%)；优点：不需要知道宽度值为多少！
奇淫技巧升级版
.bigbox3{
position: relative;
}
.bigbox3 .box3{
width: 200px;
height: 200px;
background-color: lightseagreen;html怎么让所有内容居中
position: absolute;
left: 50%;
transform: translate(-50%);
}
在线代码

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