Попытка расположить div в центре, когда текст в нем слишком длинный

Question

У меня есть этот div для показа уведомлений:

// css
    #my_div {
        min-width: 250px;
        margin-left: -125px;
        text-align: center;
        position: fixed;
        z-index: 1;
        left: 50%;
    }


// html

<div id="my_div">some text</div>

Выглядит хорошо только тогда, когда текст в нем относительно короткий, около 10-15 символов.

Когда текст длиннее, он не будет выглядеть великолепно, потому что его левый коннер по-прежнему остается в центре экрана , в то время как его правый коннер проходит до правого конусавписать текст.

Я обнаружил, что это как-то связано с «margin-left» и «left», их нужно отрегулировать.

Как правильно это сделать?

Answer 1

Вам нужно использовать margin: auto.Вы также можете добавить максимальную ширину к #my_div - т.е. max-width:500px, в противном случае окно уведомления заполнит всю ширину окна.

   #my_div {
        min-width: 250px;
        margin: 0 auto;
        display: inline-block;
        background: yellow;
    }
    
    .wrap {
      text-align:center;
      background: grey;
      width:100%;
    }

<div class="wrap">

  <div id="my_div">some text</div>

</div>