Question

我正在尝试在我的页面上制作一个弹出式灯箱，它会缩小以适应其中元素的大小，并将其置于页面中心。到目前为止，我有：

.lightboxVariable{
    display:block;
    position: absolute;
    top:0;
    bottom: 0;
    width : auto;
    left:0;
    right:0;
    padding-left:10px;    
    padding-right:20px;
    padding-top:10px;
    padding-bottom:20px;
    background:rgba(255,255,255,0.9);
    border:black, thin;
    box-shadow: 5px 5px 5px grey;
    z-index:1000000;
    overflow: auto;
    text-align:center;
    height:800px;
    }

现在左侧：0;和右：0;，元素遍布整个页面（即它忽略宽度：auto;）但没有它们，元素只是坐在页面的左侧。

有没有办法在不必诉诸某种基于js的代码的情况下做到这两点？

Answer 1

您可以尝试以下

width: auto;
height: auto;
top: 50%;
left: 50%;
// don't declare right or bottom
transform: translateX(-50%) translateY(-50%);

它会将元素的左边缘放在中心（左边：50％;），然后将其向左轻推（translateX（-50％））。

同样适用于垂直中心（上：50％;）和（translateY（-50％））。

绝对定位，可变宽度，居中的HTML元素

1 个答案: