Как сделать текст посередине страницы word?
Содержание:
position и отрицательный margin вверх
Элемент можно выровнять по вертикали, задав ему фиксированную высоту и применив position: absolute и отрицательный margin-top, равный половине высоты выравниваемого элемента. Родительскому блоку должен быть присвоен position: relative:
<!DOCTYPE html>
<html>
<head>
<title>Вертикальное выравнивание. Способ line-height</title>
<style>
.wrapper {
position: relative;
height: 400px;
}
.wrapper p {
height: 200px;
margin: -100px 0 0;
position: absolute;
top: 50%;
}
</style>
</head>
<body>
<div class="wrapper">
<p>Я выровнен по вертикали</p>
</div>
</body>
</html>
Плюсы:
- Кроссбраузерность;
- Выравнивать элементы можно как по центру, так и в любом другом положении.
Минусы:
- Трудоемко при большом количестве элементов;
- Сложно управлять;
- Необходимо знать и фиксировать высоту элемента;
- В некоторых браузерах абсолютное позиционирование может вызвать снижение производительности.
Метод 1 Горизонтальное выравнивание текста по центру
-
Выделите текст, который хотите выровнять по центру. Если в вашем документе уже есть текст, первое, что вы должны сделать, это выделить его. Поставьте курсор в начало текста, который вы хотите центрировать. Нажмите и зажмите левую кнопку мыши. Двигайте курсор в конец текста, который хотите выделить. После этого текст будет выделен прозрачной синей (а иногда серой) рамкой.
- Нажмите на кнопку «По центру» на верхней панели инструментов.
Следуйте этим указаниям:
- Взгляните на панель инструментов в верхней части окна Word (раздел с множеством опций). В левом верхнем углу должна быть выбрана вкладка «Главная» (по умолчанию). Если это не так (или вы не уверенны), нажмите на нее.
- Затем найдите секцию «Абзац», которая находится чуть ниже и справа от вкладки «Главная». Вы увидите три небольших кнопки, напоминающие страницы с текстом, выровненным по левому краю, по правому краю и по центру.
- Нажмите на кнопку с текстом, выровненным по центру.
- Отмените выделение текста.
Выделенный вами текст будет выровнен точно между левым и правым краем. Теперь нажмите туда, откуда вы хотите продолжить печатать текст и продолжите работу со своим документом.
Если текст не был отцентрирован, возможно, что перед нажатием на кнопку, вы случайно убрали выделение. Вы должны выровнять текст, когда он выделен. Никуда не нажимайте, пока не отцентрируете его.
- Если вы еще ничего не напечатали, просто нажмите на кнопку «По центру».
Если в вашем документе пока пусто, нажмите на кнопку «По центру», следуя вышеупомянутым указаниям. Все, что вы начнете печатать, будет выровнено по центру.
Если вы хотите добавить в конце документа выровненный по центру текст, нажмите на конец документа, нажмите клавишу Enter/Return, чтобы перейти на новую строку и нажмите на кнопку «По центру».
- Вы также можете выровнять текст по центру, нажав Ctrl+E.
Эта комбинация клавиш переключает выравнивание текста (по левому краю или по центру).
Если вы нажмете ее, пока текст будет выделен, тогда он будет выровнен по центру (и обратно по левому краю, если вы нажмете ее снова). Если вы нажмете эту комбинацию клавиш на пустой линии, то следующее напечатанное слово будет отцентрировано.
- Измените выравнивание другими кнопками.
Кнопки на панели инструментов рядом с кнопкой «По центру» позволят вам выбрать для текста другое выравнивание. Они действуют так же, как и кнопка «По центру». Слева направо здесь присутствуют следующие кнопки:
- Выровнять по левому краю
- По центру
- Выровнять по правому краю
- Выровнять по ширине (похоже на функцию «По центру», но с тем исключением, что слова будут растянуты так, чтобы все линии были одной ширины).
Метод 2 Вертикальное выравнивание текста по центру
Выделите текст, который хотите выровнять по центру.
Этот метод выровняет текст точно между верхним и нижним краем страницы. Для начала, выделите текст аналогично методу горизонтального выравнивания текста.
Если вы еще ничего не напечатали, пропустите этот шаг. В результате ваших действий печатаемый текст будет автоматически выравниваться вертикально.
Откройте меню «Макет», выполнив следующие шаги:
Откройте вкладку «Макет» на верхней панели (справа от вкладки «Главная», которая открывается по умолчанию).
Нажмите на кнопку «Параметры страницы».
В появившемся окне откройте вкладку «Источник бумаги».
Выберите вертикальное выравнивание по центру
Обратите внимание на поле «Вертикальное выравнивание». Выберите «По центру».
Примените изменения.
Нажав «ОК», вы измените выравнивание и вернетесь к своему документу
Если хотите, можете задействовать функцию «Применить», чтобы выбрать, к какой части документа будет применено вертикальное выравнивание.
Например, если вы выделили текст, который хотите выровнять по вертикали, не забудьте выбрать пункт «к выделенному тексту» в меню «Применить».
Советы
- Если вы оформляете название для своего документа, в дополнение к выравниванию не помешает и увеличить и размер текста. В данной статье рассказывается об изменении размера шрифта.
- Если вы хотите выделить важную информацию, можете применить полужирное или курсивное начертание, или подчеркнуть его вдобавок или вместо выравнивания. В стандартных настройках эти инструменты находятся слева от опций выравнивания в секции «Шрифт».
- Информация о статье
- Эту страницу просматривали 10 400 раза.
- Была ли эта статья полезной?
Использование flexbox для горизонтального и вертикального центрирования элементов
Способ 1. Сочетание свойств и
Свойства Flexbox-модели позволяют выровнять элемент не только по горизонтали, но и по вертикали. Для этого нужно использовать всего 3 свойства для родительского элемента: , и . Для того чтобы было видно, как сработало последнее свойство, необходимо также добавить высоту родительскоиу элементу (в примере — ). Если у вас внутрь flex-контейнера вложен не один, а несколько элементов, то для того, чтобы они расположились друг под другом, нужно еще добавить свойство .
Использование свойств Flexbox-модели для горизонтального и вертикального центрирования элемента
<style>
.test-flex{
height: 320px;
display: flex;
justify-content: center;
align-items: center
}
figure {border: 2px dotted #a9a9a9;}
figcaption {
text-align: center;
font-weight: bold;
margin-bottom: 10px;
}
</style>
<div class=»test-flex»>
<figure>
<img src=»images/cube.jpg» alt=»Центрирование flex» width=»300″ height=»200″ style=»margin: 0″ />
<figcaption>3D Cube</figcaption>
</figure>
</div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style> .test-flex{ height320px; displayflex; justify-contentcenter; align-itemscenter } figure {border2pxdotted#a9a9a9;} figcaption { text-aligncenter; font-weightbold; margin-bottom10px; } </style> <div class=»test-flex»> <figure> <img src=»images/cube.jpg»alt=»Центрирование flex»width=»300″height=»200″style=»margin: 0″> <figcaption>3DCube<figcaption> <figure> <div> |
Пример вживую:
3D Cube
Способ 1а: display: inline-flex для небольших элементов
Для небольших элементов типа иконок, которые вставлены в круглые/квадратные элементы с целью дополнительного оформления можно использовать сочетание . За счет этих свойств у нас выравнивается контент в виде иконки, созданной на основе Fontawesome, по центру круга. За счет того, что сами иконки имеют свойство , их можно легко центрировать внутри контейнера с помощью свойства .
See the Pen inline-flex centering by Elen (@ambassador) on CodePen.dark
Способ 2: используем display: flex для родителя и margin: auto для дочернего элемента
Очень простой способ, который предполагает наличие одного дочернего элемента внутри flex-контейнера. CSS-стили лаконичны:
Один дочерний flex-элемент с margin: auto внутри flex-контейнера
CSS
.parent {
height: 400px;
display: flex;
}
.child{
margin: auto;
}
|
1 2 3 4 5 6 7 |
.parent { height400px; displayflex; } .child{ marginauto; } |
В примере ниже такой вариант применен для размещения текста по центру header-a для html-страницы.
See the Pen WNGKWNQ by Elen (@ambassador) on CodePen.dark
Центрируем DIV по нижней границе страницы
Здесь для расположения div по центру по вертикали используется margin: auto и абсолютное позиционирование для внешнего элемента. Метод будет работать во всех современных браузерах.
CSS
.outer-div
{
position: absolute;
bottom: 30px;
width: 100%;
}
.inner-div
{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: #ccc;
}
HTML
<div class="outer-div"><div class="inner-div"></div></div>
У внутреннего div должна быть установлена ширина. Пространство внизу страницы регулируется с помощью свойства bottom внешнего div. Вы также можете центрировать div по верхней границе страницы, заменив свойство bottom на свойство top.
Выравнивание блока по центру в CSS
Так же, используя это свойство можно сделать в CSS выравнивание блока по центру. При этом данное свойство указываем для родительского блока, а для блока, который нужно выровнять задаем display:inline-block.
XHTML
<div class=»center-block»>
<div class=»centered»>
Выравнивание блока по центру в CSS
</div>
</div>
|
1 |
<div class=»center-block»> <div class=»centered»> Выравнивание блока по центру в CSS |
CSS
.center-block{
height:200px;
background:#E8E8FF;
border:1px solid #F0F0F0;
text-align:center;
}
.centered{
display:inline-block;
width:150px;
height:50px;
background:#8CC684;
border:1px solid #ccc;
margin-top:75px;
}
|
1 |
.center-block{ height200px; background#E8E8FF; border1pxsolid#F0F0F0; text-aligncenter; } .centered{ displayinline-block; width150px; height50px; background#8CC684; border1pxsolid#ccc; margin-top75px; } |
В результате получаем вот такое выравнивание:
Выравнивание блока по центру в CSS
Такого же результата для выравнивания по ширине мы могли бы добиться, используя тоже свойство margin со значение auto для блока, который нужно выровнять. В этом случае код css выглядел бы следующим образом:
PHP
.centered{
width:150px;
height:50px;
background:#8CC684;
border:1px solid #c1c1c1;
margin:auto;
}
|
1 |
.centered{ width150px; height50px; background#8CC684; border1pxsolid#c1c1c1; marginauto; } |
Обратите внимание, что данное свойство работает только для блочных элементов и при его использовании отступы сверху и снизу принимают значение 0.
Для того чтобы задать, к примеру, отступ сверху и снизу по 50px можно написать так:
margin: 50px auto;
Если нужно задать сверху одно значения для отступа, а снизу другое, то можно использовать такой вариант:
margin: 50px auto 20px auto;
В этом случае отступ сверху будет 50px, снизу – 20px, а по горизонтали блок будет выравниваться по центру.
Результат получается почти такой же:
Выравнивание блока по центру в CSS
Выровнять блок по центру получилось, но есть одно отличие. Как видите, тест в блоке теперь не выравнивается. Теперь, при необходимости сделать выравнивание текста по центру css, нужно для класса centered задать text-align:center.
Используя показанные в данной статье способы выравнивания по центру, вы сможете добиться необходимого результата практически в любой ситуации. Поэтому, я советую вам сохранить показанные мной заготовки кода где-нибудь у себя в шпаргалке. Они обязательно вам пригодятся в будущем.
А на сегодня у меня все. Желаю вам успешной работы над вашими проектами! До встречи в следующих статьях!
С уважением Юлия Гусарь
CSS Properties
align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index
Автоматический отступ
Этот способ напоминает предыдущий. Но здесь необходимо выставить атрибуты top, right, bottom и left на 0, а величину отступа выставить на auto. Огромное преимущество метода – наличие рабочих скроллбаров родительского элемента. Но недостаток способа такой же, как и у предыдущего – необходимость жестко задавать размеры блока.
Код выглядит следующим образом.
<style>
.parent {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;
}
.block {
width: 250px;
height: 250px;
position: absolute;
/* Выставляем параметры top, right, bottom, left на 0, а margin – на auto */
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
border: none;
}
}
</style>
<div class="parent">
<div class="block">
<img src="test.jpg" alt=""/>
</div>
</div>
How to Center Both Vertically and Horizontally
This is very similar to the method above to center an element vertically. Like last time, you must know the width and height of the element you want to center.
Set the property of the parent element to .
Then set the child’s property to , to , and to . This just centers the top left corner of the child element vertically and horizontally.
To truly center the child element, apply a negative top margin set to half the child element’s height, and a negative left margin set to half the child element’s width:
How to Center a Div Vertically and Horizontally with Transform and Translate
Use this method to center an element vertically and horizontally if you don’t know its exact dimensions and can’t use Flexbox.
First, set the property of the parent element to .
Next, set the child element’s property to , to , and to .
Finally, use to truly center the child element:
How to Center a Div Vertically and Horizontally with Flexbox
Flexbox is the easiest way to center an element both vertically and horizontally.
This is really just a combination of the two previous Flexbox methods. Then apply and to center the child element(s) horizontally and vertically:
That’s everything you need to know to center with the best of ’em. Now go forth and center all the things.
Выравнивание текста по вертикали HTML & CSS
Куда большую проблему, особенно для начинающих, доставляет необходимость вертикального выравнивания тексте. Необходимость выровнять текст по вертикали, в верстке встречается при:
- создании различных дизайнов кнопок;
- выравнивании разной величины блоков находящихся на одной линии;
- вертикальное выравнивание текстов, с разным количеством строчке;
- и еще в 100500 случаях.
Ниже приведу самые распространенные способы для центрирования по вертикали, ознакомьтесь и выберите наиболее подходящий в вашем случае.
Вертикальное центрирование текста с помощью тега «line-height»
Приведу пример создания кнопки стилями CSS.
Код HTML:
<div id="wrapper"> <div class="button"> Скачать </div> </div>
Код CSS:
#wrapper {
}
.button {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
border-radius: 4px;
color: #555555;
width:120px;
margin: 20px auto;
font-size: 14px;
text-align:center;
height: 40px;
line-height: 40px;
}
.button:hover, a.button:focus {
border-color: rgba(82, 168, 236, 0.8);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
outline: 0 none;
}
Результат: https://jsfiddle.net/k6g1phmf/14/.
Самые главные строчки, которые изучаем в данном примере, это и . Height, это высота кнопки, а тег , указывает на межстрочный интервал сверху и снизу. В результате, название кнопки располагается по центру.
В том случае, если высота родительского блока известна, может помочь следующая вариация.
Код HTML:
<div id="wrapper"> <div class="content"> Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. </div> </div>
Код CSS:
#wrapper {
background: #f09d06;
height: 300px;
margin: 20px;
width: 300px;
position: relative;
resize: vertical;
overflow: auto;
}
.content {
position: absolute;
top: 50%;
left: 20px;
right: 20px;
height: 100px;
margin-top: -70px;
background: #00f;
color: white;
padding: 20px;
}
Результат: https://jsfiddle.net/k6g1phmf/15/.
Вертикальное выравнивание по типу таблицы
Код HTML:
<div id="wrapper"> <div class="content"> Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. </div> </div>
Код CSS:
#wrapper {
display: table;
}
.content {
background: #f09d06;
color: white;
width: 300px;
display: table-cell;
height: 200px;
text-align: center;
vertical-align: middle;
}
Результат: https://jsfiddle.net/k6g1phmf/18/.
Вертикальное выравнивание блока тегом «transform»
В том случае если не известен размер родительского блока, можно сделать такой трюк:
Код HTML:
<div id="wrapper"> <div class="content"> Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. </div> </div>
Код CSS:
#wrapper {
background: #f09d06;
height: 300px;
margin: 20px;
width: 300px;
position: relative;
}
.content {
position: absolute;
top: 50%;
left: 20px;
right: 20px;
background: black;
color: white;
padding: 20px;
transform: translateY(-50%);
resize: vertical;
overflow: auto;
}
Результат: https://jsfiddle.net/k6g1phmf/16/.
Выравнивание по вертикали с использованием «display:flex»
На сегодняшний день, самый лучший способ центрирования текста по вертикали в CSS, использование flex-верстки. Все что нужно сделать, это задать родительскому блоку тег и указать свойства и .
Код HTML:
<div id="wrapper"> <div class="content"> Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. </div> </div>
Код CSS:
#wrapper {
background: #f09d06;
height: 300px;
margin: 20px;
width: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.content {
background: black;
color: white;
width: 50%;
padding: 20px;
}
Результат: https://jsfiddle.net/k6g1phmf/17/.
Теперь вы знаете как выровнять текст в CSS. Материал получился объемный, но зато очень полезный. Выравнивание текста и блоков посредством CSS, первостепенные знания, без которых не получится адекватно сверстать сайт.
Интересненько!Нужно срочно изучить!
Использование line-height для вертикального центрирования
Для элементов, которые содержат одну строку текста/иконку, можно использовать вертикальное центрирование за счет указания свойства line-height такого же размера, как и высота элемента. Учтите, что свойство — одно из немногих, для которого необязательно задавать единицы измерения, т.е. оно может быть выражено, как в px или в %, так и в виде цифры-коэффициента:
Сравнение значений line-height
CSS
.some { line-height: 160% }
равносильно
.some { line-height: 1.6 }
.some2 { line-height: 16 }
значительно больше, чем
.some2 { line-height: 16px }
|
1 2 3 4 5 6 7 |
.some {line-height160%} равносильно .some {line-height1.6} .some2 {line-height16} значительно больше, чем .some2 {line-height16px} |
В примере ниже для всех элементов с классом .icon заданы свойства и , за счет чего иконки размещаются по центру круга. Во второй иконке это свойство переопределено в классе .no-line-height в виде — и мы видим, что иконка «отправилась» к верху круга.
Вторая часть этого примера — это форматирование ссылки в виде кнопки. Здесь, наоборот, 2 кнопки имеют общий класс с высотой в 50px (), и текст в первой тоже размещен в верхней части кнопки. Зато ко второй кнопке добавлен класс .line-height со свойством — и текст в ней центрирован.
Поскольку все элементы в примере имеют свойство , то , заданный для контейнера, выравнивает весь текст внутри каждого из них по горизонтальному центру.
See the Pen line-height for vertical text centering by Elen (@ambassador) on CodePen.dark
Центрирование блока или изображения
Иногда центрировать нужно не текст, а блок в целом. Или, по-другому говоря: мы хотим, чтобы правое и левое поля были одинаковыми. Для этого нужно установить поля на ‘auto’. Это обычно используется для блоков с фиксированной шириной, потому что если блок сам по себе гибкий, он просто займёт всю доступную ширину. Вот пример:
P.blocktext {
margin-left: auto;
margin-right: auto;
width: 6em
}
...
<P class="blocktext">Этот довольно ...
Этот довольно узкий блок текста центрирован. Заметьте, что строки внутри блока не центрированы (они выровнены влево), в отличие от предыдущего примера.
Этот метод также можно использовать для центрирования изображения: поместите его в собственный блок и примените свойства полей. Например:
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">
Вариант 3
Теперь будем выравнивать с помощью flex. Может показаться, что это идеальный способ выравнивания, потому что он действительно работает очень просто. Однако FLEX не справляется с задачей описанной в варианте 2. По крайней мере, у меня не получалось достигнуть тех же результатов.
К следующей секции:
<section id=»cssmenu»> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </section>
Добавляем стили:
#cssmenu { margin: 20px auto; } #cssmenu ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; } #cssmenu > ul > li { margin: 1px; }
Получаем:
В приведенном примере:
flex-wrap: wrap;
Перекидывает блоки на следующую строку, если они заполняют контейнер. Иначе они будут уходить дальше за окно браузера.
А этим:
justify-content: center;
Мы выравниваем содержимое блоков по центру.
How to Center Vertically
Centering elements vertically without modern methods like Flexbox can be a real chore. Here we’ll go over some of the older methods to center things vertically first, then show you how to do it with Flexbox.
How to Center a Div Vertically with CSS Absolute Positioning and Negative Margins
For a long time this was the go-to way to center things vertically. For this method you must know the height of the element you want to center.
First, set the property of the parent element to .
Then for the child element, set the property to and to :
But that really just vertically centers the top edge of the child element.
To truly center the child element, set the property to :
How to Center a Div Vertically with Transform and Translate
If you don’t know the height of the element you want to center (or even if you do), this method is a nifty trick.
This method is very similar to the negative margins method above. Set the property of the parent element to .
For the child element, set the property to and set to . Now instead of using a negative margin to truly center the child element, just use :
Note that is shorthand for and . You could also write to center the child element vertically.
How to Center a Div Vertically with Flexbox
Like centering things horizontally, Flexbox makes it super easy to center things vertically.
To center an element vertically, apply and to the parent element:
