Центрируйте div на HTML относительно

У меня есть следующий div с содержимым списка. Как центрировать его на странице HTML-страницы, принимая во внимание размер содержимого div?

HTML

    <div id="container">
        <dl>
            <dt>Item 1</dt>
            <dt>Item 2</dt>
            <dt>Item 3</dt>
            <dt>Item 4</dt>
        </dl>
    </div>

У меня есть следующий css, который отлично работает, чтобы расположить div горизонтально, но он не работает для вертикальной центральной позиции:

    div {
        position: absolute;
        text-align: center;
        width: 50%;
        left: 25%;
        top: 50%;
        border-width: 4px;
        border-style: groove;
        vertical-align: middle;
    }
-1
источник поделиться
2 ответа

Вы можете сделать это с помощью set transform: translateY(-50%); на div.

JSfiddle - DEMO

HTML:

<body>
    <div id="container">
        <dl>
            <dt>Item 1</dt>
            <dt>Item 2</dt>
            <dt>Item 3</dt>
            <dt>Item 4</dt>
        </dl>
    </div>
</body>

CSS:

div {
    position: absolute;
    text-align: center;
    width: 50%;
    left: 25%;
    top: 50%;
    border-width: 4px;
    border-style: groove;
    transform: translateY(-50%);
}

Решение 2:

Set transform: translate(-50%, -50%); для div горизонтально и вертикально.

JSfiddle - DEMO

div {
    position: absolute;
    text-align: center;
    width: 50%;
    left: 50%;
    top: 50%;
    border-width: 4px;
    border-style: groove;
    transform: translate(-50%, -50%);
}
+3
источник

Вы можете попробовать следующий код.

 html,body{height: 100%;}

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

использовать префикс поставщика для поддержки браузера

0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос