.middle{ width: 400px; height:160px; position: absolute; margin-left: -200px; margin-top: -80px; top: 50%; left: 50%; display: block; z-index: 2000; border: 1px solid #006699; }
原理是这样的:因为这个块元素是绝对定位position: absolute。首先你要知道“绝对定位”的概念:它是以最近一个已经定位的祖先为基准进行定位,如果没有就以屏幕定位!在这里(屏幕大小或祖先元素对于它来说就是100%);top: 50%,就是在距屏幕上方或祖先元素50%,left: 50%,就是在距屏幕左方或祖先元素50%,因为它是以『左上角』为基准偏移的,它现在距离左边是:50%+400px,这个块的左上角在屏幕的中间,但是这个块元素不在屏幕中间,所以margin-left: -200px;把它想左边拉回一半,它就在屏幕中间了!margin-top: -80px;和上面的原理一样。往上拉回去一半。。
如何让块级元素在页面中上下居中
最新推荐文章于 2023-04-25 20:18:34 发布