новое хранилище знанийПередняя часть от входа до входаПросите внимания, помечайте звездочками и предложениями и время от времени обновляйте~

Эпизоды, которые вы не видели:Большое путешествие по построению фундамента с нуля (подробное объяснение, постоянное обновление~)
Если вы считаете, что это хорошо, пожалуйста, поставьте палец вверх

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

Все примеры в этой статьеhtmlКомпозиция рендеринга, демо-версия изображения и внешней ссылки отсутствует, поэтому вы можете напрямую выбрать пример для отладки в консоли.Рекомендуется попробовать советы, перечисленные в статье, самостоятельно, что поможет углубить ваше понимание.

最后，1个赞顶100阅读量，告诉我你曾来过、看过，并在这里不虚此行吧！！

Центрировано по горизонтали

text-align: center;

Работает со встроенным содержимым (текст, встроенные элементы, встроенные элементы блочного уровня)

<div class="container">
  this is inner text
  <div classs="ele1">
    this is a block element
  </div>
  <div classs="ele2">
      this is another block element
  </div>
</div>

.container{
  width: 300px;
  border: 1px solid grey;
  text-align: center;
}
.ele2{
  border: 1px solid grey;
  width: 200px;
}

this is inner text

this is a block element

this is another block element

Атрибуты будут наследоваться, влияя на встроенное содержимое элементов-потомков;

Блочный элемент ele1 отображает текст по центру, потому что его ширина по умолчанию равна 100%, что согласуется с контейнером.

Внутренний текст Ele2 центрирован, потому что он наследует свойства контейнера.Если вы хотите, чтобы ele2 был центрирован, установитеdisplay: inline-blockПреобразовать во встроенный блок или установитьmargin: 0 auto

Недействительно, если ширина дочернего элемента больше ширины родительского элемента.

margin: 0 auto;

требуется целевой элементФиксированная ширина, и есть место для левого и правого полей родительского элемента.

Применимо при наличии нескольких элементов блочного уровня, расположенных выше и ниже родительского элемента.

<div class="container">
  this is inner text
  <div classs="ele2">
      this is another block element
  </div>
</div>

.container{
  width: 300px;
  border: 1px solid grey;
  text-align: center;
}
.ele2{
  border: 1px solid grey;
  width: 200px;
  margin:0 auto;
}

this is inner text

this is another block element

Если для верхнего и нижнего полей установлено значение auto, расчетное значение равно 0.

абсолютное позиционирование

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

Значения top, right, bottom и left относятся к размеру родительского элемента.

absolute + transform

Параметр процента настройки преобразования зависит от его собственного размера.

<div class="container">
   this is inner text
  <div class="ele1">
    this is a block element
  </div>
</div>

.container{
    height: 100px;
    width: 200px;
    position: relative;
    border: 1px solid grey;
  	text-align: center;
}
.ele1{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);  
    width: 100px; // 此处可以不设置，默认为父元素一半宽度
    border: 1px solid #888;
}

this is inner text

this is a block element

ele1 не может установить значение ширины, тогда ширина ele1 будет рассчитываться как父元素的一半 - 左右边框的宽度

absolute + margin

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

HTML-код такой же, как и выше, заменитеele1стиль элементаtransform: translateX(-50%)дляmargin-left: -50px;

.ele1{
    position: absolute;
    left: 50%;
    margin-left: -50px; // 负值，设为元素自身宽度的一半
    width: 100px; // 此处必须设置
    border: 1px solid #888;
}

this is inner text

this is a block element

flex

Горизонтальная ось flex по умолчанию является главной осью, а текущее выравнивание основной оси установлено по центру.

<div class="container">
  <div class="ele1">
    this is a block element
  </div>
</div>

.container{
    height: 200px;
    width: 220px;
    display: flex;
    justify-content: center;
    border: 1px solid grey;
}
.ele1{
    width: 100px;
    height: 100px;
    border: 1px solid #888;
}

this is a block element

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

Центрировать по вертикали

vertical-align

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

Используется только для горизонтального выравнивания элементов в пределах одной строки, а не для вертикального центрирования относительно родительского элемента, как в примере ниже

 <div class="container">
  <div class="ele1">this is inner text</div>
  <div class="ele">inline-block</div>
</div>

.container{
    width: 220px;
    height: 50px;
    vertical-align: middle;
    border: 1px solid grey;
}
.ele{
   border: 1px solid grey;
   height :30px;
   display: inline-block;
}
.ele1{
  vertical-align: middle;
  display: inline-block;
}

this is inner text

inline-block

ele1Задержите ряд, установив высоту,eleнастройки элементаvertical-align: middleприйти сele1Выровнять . Но вся строка элементов не выровнена относительно родительского элемента.

Если для родительского элемента не задана высота или высота равна высоте самого высокого элемента в строке, линия будет центрирована по вертикали относительно родительского элемента.

Вы также можете установить родительский элементdisplay: table-cellиспользоватьvertical-alignФункция, которая действует на выравнивание таблицы, но этот метод не рекомендуется

line-height

Применяется к однострочному тексту, встроенным элементам, встроенным элементам блочного уровня.

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

<div class="container">
    this is inner text
</div>

.container{
    width: 220px;
    height: 50px;
    line-height: 50px;
    border: 1px solid grey;
}

this is inner text

Советы:

В обычных условиях, если внутри div есть текст без заданной высоты, высота div будет равна высоте текста, и некоторые люди могут подумать, что это так: текст растянут! Текст занимает место и естественным образом растягивает div. Но на самом деле, высоту div растягивает вовсе не текст, а высота строки!

Если тег не определенheightсвойства (в том числе процент высоты), то высота ее конечного исполнения должна определятьсяline-heightворваться

В другом понимании, если div с текстом не устанавливает высоту и устанавливает высоту строки на 0, div не будет растягиваться.

<div class="container">
  <div class="ele">
    this is inner text
  </div>
  <div class="ele1">
    this is inner text
  </div>
</div>

.container{
    width: 220px;
    height:100px;
    border: 1px solid grey;
}
div{
   margin-top: 20px;
   border: 1px solid grey;
}
.ele{
 line-height:0;
}

this is inner text

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

абсолютное позиционирование

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

Значения top, right, bottom и left относятся к размеру родительского элемента.

absolute + transform

Параметр процента настройки преобразования зависит от его собственного размера. Код центрирован по горизонтали, а css заменен на

top: 50%;
transform: translateY(-50%);

absolute + margin

Центрировано по горизонтали, css заменено на

top: 50%;
margin-top: -50px; // 负值，设为元素自身宽度的一半

absolute + margin: auto

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

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

 <div class="container">
  <div class="ele">
    this is block element<
  /div>
</div>

.container{
    width: 200px;
    height: 120px;
    position: absolute;
    border: 1px solid grey;
}
.ele{
    width: 70px;
    height: 80px;
    border: 1px solid grey;
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

this is block element

Дочерние элементы должны иметь фиксированную высоту и ширину.

flex

Горизонтальная ось flex по умолчанию является главной осью, а текущее выравнивание вертикальной оси установлено по центру.

<div class="container">
  <div class="ele1">
    this is a block element
  </div>
</div>

.container{
    height: 200px;
    width: 220px;
    display: flex;
    align-items: center;
    border: 1px solid grey;
}
.ele1{
    width: 100px;
    height: 100px;
    border: 1px solid #888;
}

this is a block element

> Если ele1 не задает ширину и высоту, ширина и высота подэлемента автоматически адаптируются к размеру содержимого, вы можете напрямую открыть консоль и попробовать

writing-mode

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

В режиме письма, чтобы изменить отображение текста в вертикальном направлении, вы можете сделать свойства css в горизонтальном направлении стали свойствами в вертикальном направлении.

<div class="container">
  <div class="ele1">
   block element
  </div>
</div>

.container{
    height: 200px;
    width: 200px;
    writing-mode: vertical-lr;
    border: 1px solid grey;
    text-align: center;
}
.ele1{
    display: inline-block;
    border: 1px solid #888;
}

block element

Центрируется по горизонтали и вертикали

Не говори об этом

Многоколоночный макет

Имитация расположения папок в окне

Он подходит для фиксированной ширины внутренних элементов, а несколько элементов размещаются на родительском элементе.

Внутренние дочерние элементы имеют фиксированную ширину
за пределами переноса слов
Адаптивная ширина родительского элемента

<div class="parent">
  <div class="container">
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
  </div>
</div>

.parent{
  box-sizing: border-box;
  border: 1px solid grey;
  width: 392px;
}
.container{
    box-sizing: border-box;
    display: flex;  
    flex-wrap: wrap;
    margin-right: -10px;
}
.ele{
    box-sizing: border-box;
    background: #ccc;
    width: 90px;
    height: 40px;
    line-height: 40px;
    margin-right: 10px;
    margin-bottom: 10px;
}

element

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

объяснять:

контейнер использует гибкую компоновку, установитеflex-wrap: wrap;Показать за пределами упаковки
родительская ширина(ele.width + ele.marginRight) * 4 - ele.marginRight, каждая строка отображает ровно 4 дочерних элемента.
Параметры предыдущего пункта могут быть реализованыjustify-content: space-betweenэффект, но не вызовет смещение стиля, когда строки недостаточно для 4
Контейнер сам не задает ширину, а использует внутренние элементы для его открытия, и задает ее при этомmargin-right: -10pxОн увеличит размер контейнера на 10 пикселей на основе исходной ширины, чтобы вместить последнюю строку каждой строки.eleизmarginRight

Советы:

Когда левое и правое поля отрицательны, если сам элемент не имеет ширины, ширина элемента будет увеличена.

Сам элемент имеет ширину, которая вызовет смещение

margin-topОтрицательное значение, независимо от того, установлена ли высота, не увеличит высоту, а произведет смещение вверх

margin-bottomКогда это отрицательное значение, оно не будет смещено, а уменьшит свою высоту для чтения css.

Если вам нужно расположение двух или более столбцов, вы можете изменитьparentа такжеeleширина для регулировки

Другие макеты, которые будут добавлены:

Иерархическая планировка потолка:Давайте поговорим о характеристиках атрибута позиции css и его значении атрибута sticky.
...

если вы получитеновые знания, или собранныйкрасивая картинка слева, Пожалуйста, нажмитеотличныйНу~

Связанные серии:Большое путешествие по построению фундамента с нуля (подробное объяснение, постоянное обновление~)

Рекомендуемое чтение

Давайте поговорим о характеристиках атрибута положения css и его значении атрибута sticky (эффект потолка)
Я не знал, что это значение свойства существовало раньше. . .

Переплавка и перекраска, KFC и MC
Каждый раз, когда эти двое упоминаются одновременно, отношения настолько близки, что KFC должен иметь рядом с собой MC.

окно просмотра и 1px | инструментщик: это 1px, дизайнер: нет, это не
Я не умею проектировать, но умею спорить

«Каскадный контекст CSS», который интерфейс должен освоить
Девушка и кот, кого вы хотите?

Sass.vs.Less | Введение и сравнение
Я просто пишу, вы просто посмотрите, как оно?

Справочная статья:

1010 способов добиться горизонтального и вертикального центрирования в CSS (самый полный в истории)
Галантерея Реализация различных типовых макетов + анализ примеров известных сайтов
Некоторое глубокое понимание и применение css line-height line-height