Выравнивание div в CSS

О нескольких методах выравнивания DIV

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

1. Метод Flex

Установите для родительского элемента гибкий макет: display: flex

Затем установите свойство: justify-content: center (justify-content используется для установки или извлечения выравнивания элемента эластичного блока в направлении главной оси (горизонтальной оси).)

Затем установите атрибут: align-items: center; (атрибут align-items определяет выравнивание flex-элемента в направлении боковой оси (вертикальной оси) текущей строки flex-контейнера.)

display: flex;
justify-content: center;
align-items: center;
text-align: center;

2. метод позиционирования

Вы должны сначала использовать абсолютное позиционирование position: absolute, если вы измените относительное позиционирование position: relative; оно будет центрироваться только влево и вправо, а не вверх и вниз.

.test{
  background-color: red;
  width:100px;
  height:100px;
  position:relative;
  margin:200px auto;
 }
 .test1{
  height:50px;
  width:50px;
  background-color:pink;
  position:absolute;
  text-align: center;
  line-height:50px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;

}

 

показывать

3.метод положения+преобразования

.Позиционирование + преобразование (не нужно знать ширину и высоту дочернего блока)

.test{
  background-color:red;
  width:100px;
  height:100px;
  position:relative;

 }
 .test1{
  height:50px;
  width:50px;
  background-color:pink;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50% ,-50%);
}

показывать