如何让一个盒子水平垂直居中
时间:2026-06-07 03:31:26 出处:综合阅读（143）
让一个盒子先水平居还是何让非常容易的事情，html书写一个div标签和一个标签，个盒来形容两个盒子。水平
然后添加一个css样式，垂直div设置宽度为500px，居中高度为500px，何让背景颜色来个pink颜色，个盒p标签宽度设置为200px，水平高度设置为200px，垂直背景颜色来个purple。居中
因为p标签小盒子要放在div标签的何让垂直水平居中的位置，必须要使用css的个盒定位布局来完成，别忘了一句口诀，水平子绝父相，垂直div是居中父元素所以要加相对定位，p标签是子盒子要加绝对定位。
加完定位之后，让子盒子p席先右移动50%，向下移动50%，此时的盒子不是正中心，多出
代码演示
<style> div { position: relative; width: 500px; height: 500px; background-color: pink; /* 1. 我们tranlate里面的参数是可以用 % */ /* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */ /* 这里的 50% 就是 50px 因为盒子的宽度是 100px */ /* transform: translateX(50%); */ }
p { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; background-color: purple; /* margin-top: -100px; margin-left: -100px; */ /* translate(-50%, -50%) 盒子往上走自己高度的一半 */ transform: translate(-50%, -50%); }
span { /* translate 对于行内元素是无效的 */ transform: translate(300px, 300px); } </style> </head> <body> <div> <p></p> </div> <span>123</span> </body> |
上一篇： 向强而生 强生中国学术中心焕新启程