Блог

Я пытаюсь создать на своей странице всплывающий лайтбокс, который сжимается, чтобы соответствовать размеру элемента внутри него, и центрировать его на странице. До сих пор у меня есть:

 .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;
    }
  

Теперь с помощью left:0; и right: 0; Элемент распространяется по всей странице (т. Е. Он игнорирует width:auto;), Но без них элемент просто располагается в левой части страницы.

Есть ли способ сделать и то, и другое, не прибегая к какому-то коду на основе js?

Вы могли бы попробовать следующее

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

Он поместит левый край элемента в центр (слева: 50%;), А затем переместит его обратно влево (translateX (-50%)).

Аналогично для вертикального центра (top: 50%;) и (translateY (-50%)).