«Если рабочий хочет хорошо выполнять свою работу, он должен сначала заточить свои инструменты» — Конфуций, «Аналитики Конфуция. Лу Лингун»
титульная страница > программирование > Различные способы центрирования Div в HTML и CSS

Различные способы центрирования Div в HTML и CSS

Опубликовано 2 августа 2024 г.
Просматривать:972

Different Ways to Center a Div in HTML and CSS

Следуйте за мной в LinkedIn
Следуйте за мной на Github.com

Нажмите и прочтите

Без Boaring Setion мы можем перенаправиться на программирование!

1. Использование Flexbox

Flexbox — это мощный инструмент макетирования, который позволяет легко центрировать элементы как по горизонтали, так и по вертикали.

Пример:



    
    
    Center Div with Flexbox
    


    
Centered with Flexbox

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

CSS Grid — еще одна мощная система макетирования, которая позволяет легко центрировать элементы.

Пример:



    
    
    Center Div with Grid
    


    
Centered with Grid

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

Этот метод предполагает абсолютное позиционирование элемента div и использование преобразования для его центрирования.

Пример:



    
    
    Center Div with Absolute Positioning
    


    
Centered with Absolute Positioning

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

Настройка поля: auto для элемента с указанной шириной может центрировать его по горизонтали.

Пример:



    
    
    Center Div with Margin Auto
    


    
Centered with Margin Auto

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

Этот метод использует display: table и display: table-cell для центрирования элемента.

Пример:



    
    
    Center Div with Table Display
    


    
Centered with Table Display

Пока
Приятного кодирования!

Заявление о выпуске Эта статья воспроизведена по адресу: https://dev.to/muhammedshamal/ Different-ways-to-center-a-div-in-html-and-css-47df?1 Если есть какие-либо нарушения, пожалуйста, свяжитесь с Study_golang@163. .com, чтобы удалить его
Последний учебник Более>

Изучайте китайский

Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.

Copyright© 2022 湘ICP备2022001581号-3