Как выровнять div по центру экрана, по горизонтали и вертикали?

  • Альберт11 месяцев назад
    Подскажите пожалуйста как выровнять блок div по центру экрана, по горизонтали и вертикали?

    Я хочу разместить блок точно по центру, а блок сдвигается вправо и вниз, уходит больше, чем нужно.

    <div class="center">text</div>


    .center {
    width: 300px;
    height: 300px;
    margin-top: 50%;
    margin-left: 50%;
    background-color: #999;
    }
    Ответов: 4
  • Дмитрий11 месяцев назад
    Если это модальное окно, то лучший код для решения этой задачи будет этот:

    <div class="center">text</div>

    .center {
    position:absolute;
    top: 50%;
    left: 50%;
    margin-left:-50px;
    margin-top:-50px;
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    }
  • Alex11 месяцев назад
    Самая простая разметка, выравнивание блока по вертикали и горизонтали это использование свойств table и table-cell

    Третий класс inner можно не писать, а в middle определить его расположение

    page.html
    <div class="outer">
    <div class="middle">
    <div class="inner">text center</div>
    </div>
    </div>


    style.css
    .outer {
    display: table;
    width: 100%;
    height: 100%;
    }

    .middle {
    display: table-cell;
    vertical-align: middle;
    }

    .inner {
    width: calc(100% - 30px);
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    }
  • Nicket11 месяцев назад
    Если использовать блок с однострочным текстом или картинкой, то текст внутри блока можно выровнять при помощи такой записи:

    <div id="text">text...</div>

    #text {
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    margin: 0 auto;
    background-color: #ccc;
    }
  • Сергей9 месяцев назад
    Обязательным свойством стиля является justify-content: center. Свойство align-items определяет вертикальное выравнивание содержимого блока, а justify-content в свою очередь определяет горизонтальное выравнивание. В данном примере все работает в связке стиля flex. Дочерний элемент span, автоматически становится с минимальной шириной.

    style
    #block-center {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    }

    #block-center span {
    margin: 0;
    }


    html
    <div id="block-center">
    <span>hello</span>
    </div>
Ваш ответ:
  • bold
  • italic
  • underline
  • strike
  • Add link
  • Add image
  • Blockquote
  • Align left
  • Align center
  • Align right
  • Code
×
Используя сайт, вы подтверждаете, что вы прочитали и поняли политику о куки, политику конфиденциальности и наше пользовательское соглашение.