盒子水平和垂直的方法
可以让一个子盒子在父盒子里面水平和垂直居中的方法有三种。
-
1
.inner { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background-color: skyblue; transform: translate(-50%, -50%); }1.使用子绝父相定位后,使用位移
transform: translate(-50%, -50%); -
2
/* .inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 200px; height: 200px; background-color: skyblue; } */2.给盒子的四个边距都设置为0, 再使用
margin: auto;居中 -
3
/* .inner { position: absolute; width: 200px; height: 200px; left:50% top:50%; margin-top:-50%; margin-right:-50%;3.给盒子向左移动50% ,上移动50%,再回移盒子的50%
位移 translate
translate可以让盒子沿着x轴或者y轴来移动。
语法 transform: translate(x, y); transform: translateX(x); transform: translateY(y);
问题：
他和margin有啥区别。
- margin移动盒子**会**影响其余的盒子。把其他人挤走。
- 位移translate移动盒子**不会**影响其他的盒子。不脱标。
注意：
移动的时候可以写百分比，如果使用的百分比，移动的是盒子自身的宽度
transform: translateX(100%);
