Ретроспективный обзор CSS по горизонтали и вертикали

CSS

предисловие

Поработав некоторое время с material-ui, я редко сам пишу нативные стили. Но html, css и js всегда были тремя основами внешнего интерфейса.На этой неделе я вдруг подумал о схеме горизонтального центрирования CSS, потому что использовал слишком многоflexа такжеmargin: autoКогда этот тип решения будет решен, в обзоре останется еще несколько решений, которые можно решить, поэтому я планирую просмотреть старое и изучить новое, переписать код и написать эту статью в качестве заметки.

HTML-код

<div class="parent">
  <div class="child"></div>
</div>

css-код

.parent {
    width: 300px;
    height: 300px;
    background-color: blue;
}
.child {
    width: 100px;
    height: 100px;
    background-color: red;
}

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

1. гибкий макет 

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.parent {
    display: flex;
}
.child {
    align-self: center;
    margin: auto;
}

2. абсолютная + отрицательная маржа

Этот метод подходит для знания фиксированной ширины и высоты.

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

Три, абсолютное + преобразование 

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

В-четвертых, абсолютная + маржа авто 

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

Пять, абсолютное + расчет

Этот метод подходит для знания фиксированной ширины и высоты.

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

Шесть, выравнивание по тексту + выравнивание по вертикали 

.parent {
    text-align: center;
    line-height: 300px; /* 等于 parent 的 height */
}
.child {
   display: inline-block;
   vertical-align: middle;
   line-height: initial; /* 这样 child 内的文字就不会超出跑到下面 */
}

Семь, таблица-ячейка 

.parent {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.child {
   display: inline-block;
}

8. Сетка 

.parent {
    display: grid;
}
.child {
   align-self: center;
   justify-self: center;
}

Девять, режим письма 

.parent {
    writing-mode: vertical-lr;
    text-align: center;
}
.child {
   writing-mode: horizontal-tb;
   display: inline-block;
   margin: 0 calc(50% - 50px);
}

Категории