Всем привет, мы снова встретились, я ваш друг Цюаньчжаньцзюнь.

Четыре метода центрирования элементов div в CSS

• 1. Сначала определите основной стиль div.
• 2. Конкретные методы реализации
  • Первый: используйте фазу абсолютного отца ребенка и маржу: auto для достижения
  • Второй тип: использование фазы «сын-отец» и преобразования анимации перехода для достижения
  • Третий тип: также реализуется с использованием абсолютной родительской фазы дочернего элемента и отрицательного значения поля.
  • Четвертый метод: реализация с использованием гибкого макета.

1. Сначала определите основной стиль div.

Сначала установите несколько основных стилей для элемента div, чтобы результат можно было легко увидеть.

CSS-структура:
<style type="text/css"> *{ 
 margin: 0; height: 0; } .warp{ 
 width: 500px; height: 500px; background-color: розовый;//Дайте фон, результат будет нагляднее margin: 50px auto; } .warp .box{ 
 width: 200px; height: 200px; background-color: green; } </style>
HTML-структура:
<div class="warp">
<div class="box"></div>
</div>

2. Конкретные методы реализации

Первый: используйте фазу абсолютного отца ребенка и маржу: auto для достижения

Установите относительное позиционирование для родительского элемента div, установите абсолютное позиционирование для дочернего элемента div, установите для левого, правого, верхнего и нижнего значений значение 0, а затем установите для поля значение auto.

Примечание. Родительский элемент дочернего элемента позиционируется относительно, а дочерний элемент позиционируется абсолютно.

		.warp{ 

width: 500px;
height: 500px;
background-color: pink;
margin: 50px auto;
Position:relative;//Установить относительное позиционирование
}
.warp .box{ 

width: 200px;
height: 200px;
background-color: green;
Position:absolute;//Установить абсолютное позиционирование
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}

Второй тип: использование фазы «сын-отец» и преобразования анимации перехода для достижения

Установить относительное позиционирование родительского div,Установить абсолютное позиционирование дочернего элемента div,Воляleft、topустановлен на50%；Затем установитеtransform: translate(-50%,-50%);Прямо сейчас достижимо.

принцип：наборleft: 50%;top:50%; После этого дочерний элемент располагается в позиции, показанной на рисунке,

В это время нам нужно переместить дочерний div на половину ширины влево, а расположение дочернего div такое, как показано на рисунке.

Поднимите дочерний элемент div на половину высоты, результат будет такой, как показано на рисунке.

Прямо сейчас transform: translate(-50%,-50%);。

		.warp{ 

width: 500px;
height: 500px;
background-color: pink;
margin: 50px auto;
Position:relative;//Установить относительное позиционирование
}
.warp .box{ 

width: 200px;
height: 200px;
background-color: green;
Position:absolute;//Установить абсолютное позиционирование
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}

Третий тип: также реализуется с использованием абсолютной родительской фазы дочернего элемента и отрицательного значения поля.

Установите абсолютное позиционирование для дочернего элемента div, а также установите его слева: 50%; top: 50%,Затем используйте значение поля, чтобы оно было отрицательным.,производитьиз Противоположное смещение（То же самое с анимацией переходаtranformпроизводить位移类似）。Прямо сейчасMargin-left: Calc (собственная ширина -div/2),Margin-top:calc(собственная высота -div/2),Вы также можете самостоятельно рассчитать значение поля «margin-left» и значение поля-top.

Уведомление：calc()функция,CSS3 из calc() Функции позволяют нам выполнять математические операции над значениями свойств.

		.warp{ 

width: 500px;
height: 500px;
background-color: pink;
margin: 50px auto;
Position:relative;//Установить относительное позиционирование
}
.warp .box{ 

width: 200px;
height: 200px;
background-color: green;
Position:absolute;//Установить абсолютное позиционирование
left: 50%;
top: 50%;
margin-left:calc(-200px/2);
margin-top:calc(-200px/2);	
}

Четвертый метод: реализация с использованием гибкого макета.

родителюdivнастраиватьdisplay: flex;Воля父级divПреобразовать элемент во флексбокс,Затем установите主轴对齐方式为居中 justify-content: center;,Выравнивание поперечной оси центрировано align-items: center;Прямо сейчас достижимо.

		.warp{ 

width: 500px;
height: 500px;
background-color: pink;
margin: 50px auto;
display: flex;
justify-content: center;
align-items: center;
}
.warp .box{ 

width: 200px;
height: 200px;
background-color: green;
}

Заявление об авторских правах: Содержание этой статьи добровольно предоставлено пользователями Интернета.,Мнения, выраженные в данной статье, принадлежат исключительно автору. Этот сайт предоставляет только услуги по хранению информации.,нет собственности,Никакая соответствующая юридическая ответственность не предполагается. Если на этом сайте есть какое-либо подозрение на нарушение авторских прав/незаконный контент,, Пожалуйста, отправьте электронное письмо на Сообщите, после проверки этот сайт будет немедленно удален.

Издатель: Full Stack Programmer - User IM, укажите источник для перепечатки: https://javaforall.cn/213942.html Исходная ссылка: https://javaforall.cn