Первая классическая компоновка CSS — макет с вертикальным центрированием

CSS

Элементы центрированы по горизонтали и вертикали

  • Настройте два поля, отношение родитель-потомок: родительский элемент
<body>
    <div class="parent">
    	<div class="child">
    	    child
    	</div>
    </div>
</body>

Способ 1: одинаковая ширина и высота + отступы

  • Установите ширину и высоту родительского элемента на тот же размер, что и дочерний элемент, а затем установите отступ родительского элемента. В этот момент заполнение вдавит дочерний элемент в середину родительского элемента;
  • В это время позиционирование родительских и дочерних элементов может быть включено или нет;
*{
    margin: 0;
    padding: 0;
}
.parent{
    width: 100px;
    height: 100px;
    /*将padding设置，来挤出来居中的样子；但是要注意的是，此时的width和height要和子元素的大小一样，否则还是不居中*/
    padding: 100px;
    border: 1px solid;
    margin: 100px auto;
}
.child{
    width: 100px;
    height: 100px;
    background: pink;
    line-height: 100px;
    text-align: center;
}

Способ 2: абсолютный + маржа:авто

  • Относительное позиционирование родительских элементов, абсолютное позиционирование дочерних элементов;
  • Блочная модель с абсолютным позиционированием имеет функцию: лево+право+ширина+отступ+маржа=ширина содержащего блока; поэтому в настоящее время вы можете установить левое и правое (значение по умолчанию — авто, поэтому его необходимо сбросить). ) на 0, и отступ был определен (значение по умолчанию — 0 пикселей, если оно не установлено), поэтому остальное — это поле, но значение поля по умолчанию — 0 пикселей. Поэтому установите для магина значение auto, чтобы элемент автоматически центрировался;
  • То есть: слева, справа, верх, снизу 0; маржа авто;

如图讲解

*{margin: 0;padding: 0;}
.parent{
    position: relative;
    width: 200px;
    height: 200px;
    /*padding: 100px;*/
    border: 1px solid;
    margin: 100px auto;
}
.child{
    position: absolute;
    /*left+right+width+padding+margin=包含块的宽度*/
     /*0 0 100 0 auto =300*/
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    background: pink;
    line-height: 100px;
    text-align: center;
}

Способ 3: абсолютный + отрицательный край (или преобразование)

  • Отношение отца к сыну абсолютно относительно, и до 50%, маржа будет отрицательной
  • Мощный абсолют, конечно, очень прост для таких маленьких задач;
  • Абсолютное позиционирование находится вне потока документа и не повлияет на расположение последующих элементов. Но если абсолютно позиционированный элемент является единственным элементом, родительский элемент также теряет высоту.
  • Относительное позиционирование родительских элементов, абсолютное позиционирование дочерних элементов;
  • Установите левую и правую часть дочернего элемента непосредственно до 50%, относительно родительского элемента;
  • Затем используйте margin-left и margin-top, чтобы установить отрицательную половину дочернего элемента. Это перетаскивание назад той части, которая отклоняется от центра родительского элемента;
.parent{
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid;
}
.child{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
    width: 100px;
    height: 100px;
    background: pink;
    line-height: 100px;
    text-align: center;
}
  • Если вы не знаете ширину и высоту дочернего элемента, используйте transfrom:translate3d(-50% -50% );
    • transform — это свойство CSS3, имеющее проблемы с совместимостью;
transfrom:translate3d(-50% -50% );
/* width: 100px;
height: 100px; */
  • Однако, когда этот метод нельзя использовать для элементов, которые необходимо преобразовать в 3D, это повлияет на переднюю и заднюю часть;

Способ 4: встроенный блок+ячейка таблицы

  • хорошая совместимость
<style>
  .parent {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  .child {
    display: inline-block;
  }
</style>

Метод 5: гибкий макет

  • Просто установите родительское свойство, не устанавливая подэлементы
  • Проблемы совместимости
// 父元素设置
display: flex;
justify-content:center;
align-items:Center;

Вертикальное и горизонтальное центрирование текстовых элементов

  • Установите высоту строки и выравнивание текста:
line-height: 50px;
text-align:center;
  • гибкий макет
display: flex;
justify-content:center;
align-items:Center;

Одностороннее горизонтальное центрирование или вертикальное центрирование может быть достигнуто в соответствии с вышеуказанным методом.

Категории