<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>纯CSS制作水平垂直居中“十字架”</title><style>body,div{margin:0;padding:0;}#box{position:absolute;top:0;left:0;right:0;bottom:0;width:400px;height:300px;margin:auto;}#box::before{content:"";position:absolute;left:50%;top:0;width:30px;height:100%;margin-left:-15px;background-color:pink;}#box::after{content:"";position:absolute;left:0;top:50%;width:100%;height:30px;margin-top:-15px;background-color:pink;}</style></head><body><div id="box"></div></body></html>
<!-- div默认的宽度是100%，当div绝对定位以后，其宽度是按照div中内容的宽度。 -->
<!-- 如果需要使用margin让一个盒子水平居中，必须设置盒子的宽 -->
position:absolute;top:0;left:0;right:0;bottom:0;width:400px;height:300px;margin:auto;
先清除这个盒子的top，right，bottom，left值，然后让这个盒子自动根据浏览器的屏幕水平垂直居中。
![[2024年]物理的困惑 1500字](https://1500zi.500zi.com/uploadfile/img/2024/06/02/1f5c54fc40bb00b41faf1fb76363a727.jpg)
