Как сохранить div по центру при изменении размера окна?

#javascript #html #css

Вопрос:

У меня есть вкладка div в правой части экрана посередине, и когда я пытаюсь изменить размер окна, оно перемещается в правую нижнюю часть экрана. Я хотел бы оставаться в середине, независимо от размера экрана. Как я мог бы сделать это с моим текущим кодом? Я пробовал margin-left:auto и margin-right:auto, но это, похоже, не сработало. Я также не могу обязательно менять позицию: потому что они нужны тем, чтобы все остальное работало.

Есть какие-нибудь предложения?

 <!DOCTYPE html>
<html lang="en">
  <head>
    <style type="text/css">
      body {
        font-family: 'Roboto Condensed', sans-serif;
      }
      #side-chat {
        position: absolute;
        right: 100%;
        bottom:50%;
        z-index:9999999999999 !important;
        width: 150px;
        margin-right: -59px;
        transform: rotate(-90deg);
        display:flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        border-radius: 10px;
        background: rgba(30, 175, 230, 0.5);
        text-decoration: none;
        padding: 15px;
        font-size: 25px;
        line-height: 20px;
        text-align: center;    
      }
      #olark-box-wrapper {
        position: absolute;
        z-index:99999999999999 !important;
        top: 400px;
        right: -300px;
        -webkit-transition-duration: 0.3s;
        -moz-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        transition-duration: 0.3s;
      }
      #olark-box-wrapper.chatbox-open {
        right: 0
      }
      #olark-box-wrapper.chatbox-closed {
       right: -300px;
      }
      #habla_window_div {
        margin: 0 !important;
      }
      #side-chat img{
        margin-right: 10px;
        
      }
      #side-chat:hover,
      #side-chat:active {
       background: #22a7e5;
}
    </style>
  </head>
  <body>

<div id="olark-box-wrapper">

  <!-- Olark chat tab -->
    <a id="side-chat" href="javascript:void(0);" onclick="setTimeout(changeClass, 3);">
      <img src="icon-chat.svg">
         Chat
    </a>

  <!-- Empty Olark chat box container -->
  <div id="olark-box-container"></div>

</div>

<!-- begin olark code -->
<script type="text/javascript" async> ;(function(o,l,a,r,k,y){if(o.olark)return; r="script";y=l.createElement(r);r=l.getElementsByTagName(r)[0]; y.async=1;y.src="//" a;r.parentNode.insertBefore(y,r); y=o.olark=function(){k.s.push(arguments);k.t.push( new Date)}; y.extend=function(i,j){y("extend",i,j)}; y.identify=function(i){y("identify",k.i=i)}; y.configure=function(i,j){y("configure",i,j);k.c[i]=j}; k=y._={s:[],t:[ new Date],c:{},l:a}; })(window,document,"static.olark.com/jsclient/loader.js");
  /* custom configuration goes here (www.olark.com/documentation) */
  //olark.configure('system.hb_detached', true);
  olark.configure('box.inline', true);
  olark.identify('xxxx-xxx-xx-xxxx');</script>
  <!-- end olark code -->
  <script type='text/javascript'>
    // Javacript function to toggle the class of the chat box wrapper
    function changeClass()
    {
      // Get the HTML object containing the Olark chat box
      var olark_wrapper = document.getElementById("olark-box-wrapper");
      // If the chat box is already open, close id
      if ( olark_wrapper.className.match(/(?:^|s)chatbox-open(?!S)/) ) {
        olark_wrapper.className = "chatbox-closed";
        document.querySelector('#side-chat img').src = "icon-chat.svg";
      }
      // Otherwise add open the Olark chat box
      else {        
        olark_wrapper.className = "chatbox-open";
        document.querySelector('#side-chat img').src = "icon-cancel.svg";
        
      }
        
    }
</script>
  </body>
</html>

1. Вы можете использовать flex для этого. Просто примените display: flex; , align-items: center и justify-content: center к родительскому элементу

2. сетка также может оказать большую помощь,режим записи тоже и размер шрифта:зажим(x,x,x) также может быть чем-то, о чем вы, возможно, захотите узнать. пример codepen.io/gc-nomade/pen/mdWQRRB

Ответ №1:

Вы размещаете свой div относительно родителя, используя абсолютное абсолютное позиционирование.

Если размер вашей обертки важен, вы должны обернуть ее в другой div, сделать так, чтобы она занимала всю высоту страницы, расположить ее справа и использовать гибкий дисплей, как предложил @ali-abbasov в своем комментарии.

 #wrapper-of-olark-box-wrapper {
  position: fixed; // so that it stays positioned as you want regardless of the parent
  top:0;
  right:0;

  height: 100%; // you can try 100vh if this one does not work
  
  display: flex; // the solution
  justify-content: right;
  align-items: center;
}

1. Это предотвращает открытие и закрытие окна чата

2. @Shultz Я попробовал с некоторыми изменениями, которые я написал в коде, это работает на моей стороне: codepen.io/mlarabi/pen/zYZMNOg