Введение

Существует несколько способов расположить элемент div в центре с помощью CSS. Вот некоторые распространенные методы:

1. Использование флексбокса

Flexbox — один из самых популярных методов центрирования элементов по горизонтали и вертикали.

{` .container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100vh; /* Contoh: memposisikan div dalam tinggi viewport */
}`}

{`

    
Isi di sini
`}

2. Использование макета сетки

CSS Grid также обеспечивает простой способ центрирования элементов.

{`.container {
    display: grid;
    place-items: center; /* Center horizontally and vertically */
    height: 100vh;
}`}

{`

    
Isi di sini
`}

3. Использование абсолютного положения и преобразования

Этот метод использует положение: абсолютное и преобразование, чтобы расположить элемент в центре.

{`.container {
    position: relative;
    height: 100vh;
}
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}`}

{`

    
Isi di sini
`}

4. Использование автоматического поля

Этот метод используется для позиционирования элементов по горизонтали в центре с автоматическими полями. Однако для вертикали нужны дополнительные хитрости.

{`.centered {
    width: 200px; /* Contoh lebar */
    height: 200px; /* Contoh tinggi */
    margin: auto;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}`}

{`
Isi di sini
`}

5. Использование выравнивания текста и высоты строки (только горизонтальное центрирование)

Это хорошо работает для текстовых или встроенных блочных элементов.

{`.container {
    text-align: center; /* Horizontal centering */
    line-height: 100vh; /* Contoh tinggi viewport untuk vertikal centering */
}
.centered {
    display: inline-block;
    vertical-align: middle; /* Jika digunakan dengan elemen lain */
    line-height: normal;
}`}

{`

    
Isi di sini
`}

6. Использование отображения таблицы

Это старая техника, но она все еще работает.

{`.container {
    display: table;
    height: 100vh;
    width: 100%;
    text-align: center; /* Horizontal centering */
}
.centered {
    display: table-cell;
    vertical-align: middle; /* Vertikal centering */
}`}

{`

    
Isi di sini
`}

Заключение

Для центрирования элементов в середине страницы как по горизонтали, так и по вертикали методы Flexbox и Grid являются самыми простыми и современными. Однако другие методы могут быть полезны в зависимости от потребностей проекта. Спасибо, что дочитали эту статью до конца