предисловие
Когда я только начал работать, мне отчетливо запомнилась сцена, когда интервьюер задал мне ряд центральных вопросов. «Как добиться центрирования текста?» «Что делать, если это многострочный текст?» «Как добиться горизонтального центрирования блочных элементов» «Как добиться вертикального центрирования блочных элементов». . . Когда я задал вопрос, у меня в голове был беспорядок, и я не знал, как на него ответить. Сосредоточение — неизбежная сцена в повседневной работе, и это также часто происходит на собеседованиях. Эта статья посвящена этим вопросам.Я надеюсь помочь студентам, у которых есть те же сомнения, что и у меня в прошлом, чтобы они могли чувствовать себя более комфортно, когда они сталкиваются с основными проблемами на будущей работе и собеседованиях.
Центрирование встроенных элементов
Центрировать текст по вертикали
Вертикальное центрирование одной строки текста
Вертикальное центрирование одной строки текста — самый простой способ.line-heightТочно такой же высоты, как коробка.
Здесь есть недоразумение, многие люди одновременно устанавливают центр одной строки текста.heightа такжеline-heightТо же самое, по сути, ставить не надоheight, только установитьline-heightВы можете, в это время высота коробки определяетсяline-heightподожди, сline-heightТочно так же.
.center {
// 完全可以不设置高度
// height: 20px;
line-height: 20px;
}
Многострочный текст с вертикальным центрированием
1.vertical-align
vertical-alignВы можете указать вертикальное выравнивание строчных элементов.
Этот метод требует дополнительного.centerЭлемент оборачивает содержимое, которое необходимо центрировать. установить родительский элементline-heightвысота элемента, центрирующего дочерний элемент.centerизdisplayдляinline-block, так что он имеет характеристики встроенного элемента, потому чтоline-heightнаследование, поэтому установитеline-height: 20px;сбрасывает центрированный дочерний элементline-height, затем установитеvertical-align: middle;Вертикальное выравнивание по центру внутри линейного блока.
<div class="box">
<div class="center">
虽然你们是扮演路人甲乙丙丁，但是一样是有生命、有灵魂的。
</div>
</div>
<style>
.box {
background-color: orange;
line-height: 200px;
width: 300px;
}
.center {
background-color: green;
line-height: 20px;
display: inline-block;
vertical-align: middle;
}
</style>
2.table-cell
Отличие от использования настроек встроенных элементовvertial-alignцентрирует текущий элемент по вертикали,table-cellнастройки элементаvertial-alignОн будет выравнивать свои дочерние элементы вертикально по центру, даже если дочерние элементы являются элементами уровня блока, они будут выровнены по вертикали, поэтому вы также можете использовать этот метод для достижения вертикального центрирования элементов уровня блока.
.box {
height: 200px;
display: table-cell;
vertical-align: middle;
}
Строчные элементы располагаются по центру по горизонтали
text-alignУправляет горизонтальным выравниванием элементов в дочерних строках, это очень просто и понятно установитьtext-align:centerмогу.
.center {
text-align: center;
}
Элементы уровня блока располагаются по центру по горизонтали
marginценностьautoМожет занять все оставшееся пространство в соответствующем направлении, если вы установите два направления в горизонтальном направленииmarginзначенияauto, два направления будут поровну делить оставшееся пространство для достижения центрирования.
Так почему же мы никогда не используем этот метод для достижения вертикального центрирования? потому чтоautoЕсть предварительное условие для работы значения, то есть, если конкретная длина не задана в соответствующем направлении, она будет автоматически покрыта. очевидноwidthМожно покрыть родительский элемент, иheightНе можем.
.center {
margin: 0 auto;
}
Элементы блочного уровня центрированы по вертикали.
Можно ли это использоватьmargin:auto;Как добиться вертикального центрирования? Конечно, вы можете, изменивwriting-modeИзмените поток блока, чтобы сделать его горизонтальным. В это время направление высоты будет полностью мозаичным по умолчанию.margin:auto;Он может достичь вертикального центрирования. Но у этого метода есть побочные эффекты, т.к.writing-modeНаследование атрибутов приведет к тому, что все направления потока всех подэлементов этого элемента станут горизонтальными. И в это время горизонтальное направление больше не может использовать этот метод для достижения центрирования.
<div class="box">
<div class="center">
虽然你们是扮演路人甲乙丙丁，但是一样是有生命、有灵魂的。
</div>
</div>
<style>
.box {
background-color: orange;
height: 200px;
writing-mode: vertical-lr;;
}
.center {
background-color: green;
height: 50px;
margin: auto 0;
}
</style>
Можно ли использовать эту функцию для вертикального и горизонтального центрирования? Также возможно, мы продолжаем смотреть вниз
Центрируется по горизонтали и вертикали
1.position (центральный элемент имеет фиксированную ширину и высоту)
Установите абсолютное позиционирование родительского элемента и относительное позиционирование центрального элемента,top,right,bottom,leftЗначение равно 0. В настоящее время, если вы не установите определенную ширину и высоту, центрированный элемент заполнит родительский элемент как в горизонтальном, так и в вертикальном направлениях. В это время установите для него конкретную ширину и высоту.margin:auto;Абсолютное центрирование может быть достигнуто.
Следует отметить, что этот метод совместим только с браузерами IE8 и выше.Если проект совместим с IE7, можно использовать следующий метод
.box {
position: relative;
}
.center {
position:absolute;
width: 200px;
height: 200px;
top:0;
bottom:0;
left:0;
right:0;
margin: auto;
}
2.vertical-align
Сначала осуществите центрирование центрирующего элемента в горизонтальном направлении и установите центрирующий элемент.displayзначениеinline-clock, чтобы он имел свойства встроенного элемента. Установите элемент внешнего блокаtext-align: center;Центрирует центрированный элемент по горизонтали.
Затем реализуйте центрирование в вертикальном направлении.Этот метод требует добавления вспомогательного элемента и установки вспомогательного элемента.height:100%;Сделайте так, чтобы высота текущей строки заполнила родительский элемент, а затем установитеvertical-align: middle;Отцентрируйте его по вертикали.
<div class="box">
<div class="assist"></div>
<div class="center">
虽然你们是扮演路人甲乙丙丁，但是一样是有生命、有灵魂的。
</div>
</div>
<style>
.box {
background-color: orange;
height: 200px;
width: 500px;
text-align: center;
}
.center {
background-color: green;
width: 150px;
display: inline-block;
vertical-align: middle;
}
.assist {
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
3. позиция с запасом
Этот метод работает, когда известны ширина и высота центрированного элемента. Установите относительное позиционирование родительского элемента, абсолютное позиционирование центрального элемента,left,topзначение 50%,left,topЗначения , соответственно, рассчитываются относительно ширины и высоты родительского элемента, при этом верхняя левая вершина центрируемого элемента будет располагаться в центре родительского элемента. Затем установите центрированный элементmargin-left,margin-topЭто отрицательная половина ширины и высоты, так что центрирующий элемент смещается влево в горизонтальном направлении относительно 50% его собственной ширины и смещается в вертикальном направлении относительно его собственной высоты. Эффект центрирования может быть достигнут.
<div class="box">
<div class="center">
虽然你们是扮演路人甲乙丙丁，但是一样是有生命、有灵魂的。
</div>
</div>
<style>
.box {
background-color: orange;
height: 200px;
width: 500px;
position: relative;
}
.center {
background-color: green;
width: 150px;
height: 50px;
position:absolute;
top:50%;
left:50%;
margin-left: -75px;
margin-top: -25px;
}
</style>
4. позиция с преобразованием
Четвертый способ заключается в использованииpositionСотрудничатьtransform. Этот метод в принципе похож на предыдущий метод, но использование сцены добавляет элементы, ширина и высота которых не фиксированы. Таким же образом сначала установите относительное позиционирование родительского элемента и абсолютное позиционирование центрального элемента.left,topВсе значения равны 50%. Установите центральный элемент сноваtransform: traslate(-50%, -50%);,translateПроцентное значение вычисляется относительно самого себя.Эффект центрирования может быть достигнут путем смещения центрирующего элемента влево в горизонтальном направлении относительно 50% его собственной ширины и смещения его вверх в вертикальном направлении относительно его собственной высоты. на 50%.
<div class="box">
<div class="center">
虽然你们是扮演路人甲乙丙丁，但是一样是有生命、有灵魂的。
</div>
</div>
<style>
.box {
background-color: orange;
height: 200px;
width: 500px;
position: relative;
}
.center {
background-color: green;
width: 150px;
position:absolute;
top:50%;
left:50%;
transform: traslate(-50%, -50%);
}
</style>
5.flex
Если вам не нужно учитывать совместимость с IE9 и предыдущими браузерами,flexМакет является наиболее рекомендуемым способом.
установить родительский элемент вflexКонтейнер, главная ось и выравнивание по поперечной оси — все это центрированные пары. оflexДополнительные сведения см. в Ruan Dashen.блог, очень подробно описано.
.box {
display: flex;
align-items: center;
justify-content: center;
}