Как сделать выравнивание по центру ?

Выравнивание с помощью transform

Outer {
position: relative;
}
.inner {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
http://jsfiddle.net/c1bgfffq/9/

Почему в предыдущем способе нельзя было задать значение в процентах? Так как процентные значения свойства margin вычисляются относительно родительского элемента, значение в 50% равнялось бы половине высоты внешнего блока, а нам нужно было поднять внутренний блок на половину его собственной высоты. Для этого как раз подходит свойство transform .

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

Выравнивание блоков с известными размерами

Проще всего с помощью CSS выровнять блоки, у которых заранее известна высота (для выравнивания по вертикали) или ширина (для горизонтального выравнивания).

Выравнивание при помощи padding

Иногда можно не центрировать элемент, а добавить ему границы свойством «padding
«.

Например, есть картинка 200 на 200 пикселей, и требуется центрировать ее в блоке 240 на 300. Можем задать высоту и ширину внешнему блоку = 200px, и добавить по 20 пикселей сверху и снизу, и по 50 слева и справа.

Выравнивание абсолютно позиционированных блоков

Если для блока задано «position: absolute
«, тогда его можно позиционировать относительно ближайшего родителя с «position: relative». Для этого нужно всем свойствам («top
«,»right
«,»bottom
«,»left
«) внутреннего блока присвоить одинаковое значение, а также «margin: auto».

*Есть нюанс: Ширина (высота) внутреннего блока + значение left (right, bottom, top) не должны превышать размеры родительского блока. Надежнее свойствам left (right, bottom, top) присваивать 0 (ноль).

Изучите наиболее эффективные методы выравнивания текста и графики

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

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

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

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

Преимущества выравнивания в дизайне страницы

Выравнивание элементов на странице печати или веб-странице служит для:

• Создать порядок и передать гармонию
• Организовать элементы страницы
• Групповые предметы
• Создать визуальные связи

Хорошее выравнивание невидимо. Большинство читателей сознательно не заметят, что все выстроено аккуратно. Однако большинство зрителей заметят, когда элементы не выровнены.

Типы выравнивания для макетов страниц

Горизонтальное выравнивание . При горизонтальном выравнивании поля слева и справа точно или визуально равны. Горизонтальное выравнивание может быть по всей странице или внутри столбцов. Это не обязательно означает выравнивание по центру. Блок текста влево/неровность вправо можно выровнять по горизонтали

Даже если отдельные строки текста не идеально выровнены с каждой стороны, тщательное внимание к количеству пробелов в конце строки может привести к визуально сбалансированному количеству полей на каждой стороне блока текста.

Вертикальное выравнивание. При вертикальном выравнивании верхние и нижние поля точно или визуально равны

Выравнивание по вертикали может быть полной страницей или частями страницы.

Выравнивание краев . Выравнивание краев выравнивает текст или объекты вдоль их верхних, нижних, левых или правых краев. Выравнивание по левому краю (называемое неровным правым) часто встречается с текстом в газетах и ​​на веб-страницах, потому что наши глаза привыкли видеть и читать текст таким образом.

Выравнивание по центру: Выравнивание по центру может быть горизонтальным или вертикальным, или и тем, и другим.

Визуальное или оптическое выравнивание. Визуальное или оптическое выравнивание устраняет некоторые проблемы, которые могут возникнуть при других типах выравнивания из-за различной формы букв и графики. При визуальном выравнивании объекты могут быть не точно выровнены, но на глаз они выглядят выровненными.

Используя выравнивание

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

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

Для простых соглашений элементы могут быть выровнены с помощью параметров автоматического выравнивания в вашем программном обеспечении. Для более сложных макетов использование направляющих и сеток помогает в точном размещении элементов.

Пробелы между boxes

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

Свойство является сокращением для и , что позволяет сразу установить эти свойства:

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

В этом примере я использую свойство (en-US) в дополнение к . Первоначальные свойства зазора были предварительно префиксными  в спецификации Grid Layout, а некоторые браузеры поддерживают только эти префиксные версии.

• (en-US)
• (en-US)
• (en-US)

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

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

Выбор интервала между абзацами

Итак, мы с вами выяснили, как выравнивать текст в «Ворде» в горизонтальном направлении и как изменить интервал между отдельными строчками. Теперь попробуем разобраться в тонкостях оформления абзацев. Поменять расстояние между ними в этой программе также очень просто. По умолчанию абзацы в программе разделяются одной строкой. Для того чтобы это изменить, необходимо прежде всего выделить нужный абзац. Далее на вкладке «Разметка страницы» (или «Макет страницы» в зависимости от версии) переходим в группу «Абзац». Здесь можно задать значение отступа от левого или правого края, а также интервал «До» (сверху) и «После» (снизу).

Выравнивание в таблице

Microsoft Office содержит табличный редактор Excel, в котором можно создавать таблицы, применять формулы и совершать множество полезных действий. Однако часто приходится создавать таблицы не только в Excel, но и в Word, а затем данные, помещённые в ячейки таблицы, также выравнивать по заданным критериям.

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

Выравнивание информации в табличной ячейке

Чтобы произвести определённое размещение данных в ячейке, первоначально важно указать нужные ячейки, выделяя их, после чего в строке меню открыть вкладку «Макет», среди функциональных возможностей которой будет находиться блок «Выравнивание». Остаётся теперь выбрать желаемый вариант выравнивания, кликнуть по нему, и данные в ячейке будут выровнены

Остаётся теперь выбрать желаемый вариант выравнивания, кликнуть по нему, и данные в ячейке будут выровнены.

Если пользователь имеет в распоряжении Word 2003, первоначально также выделяются ячейки, после чего в строке меню выбирается вкладка «Таблица», а далее — «Свойства таблицы». В открывшемся диалоговом окне на подменю «Таблица» можно обнаружить блок «Выравнивание», который непосредственно отвечает за распределение информации по ширине, центру или краям ячейки.

Итак, редактировать информацию в Word несложно, если досконально ознакомиться с основными функциональными возможностями офисного приложения.

Горизонтальное выравнивание

margin: auto

Выравнивание по горизонтали при помощи margin используется при известной ширине центрируемого элемента. Работает для блочных элементов:

Elem {
margin-left: auto;
margin-right: auto;
width: 50%;
}

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

text-align: center

Данный способ подходит для выравнивания по центру текста в пределах блока. text-align: center:

Выравнивание с помощью text-align

Я выровнен по центру

position и отрицательный margin влево

Подойдет для центрируемых блоков известной ширины. Задаем родительскому блоку position: relative для позиционирования относительно него, центрируемому элементу position: absolute , left: 50% и отрицательный margin-left , значение которого равно половине ширины элемента:

Выравнивание с помощью position

Я выровнен по центру

display: inline-block + text-align: center

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

Выравнивание с помощью display: inline-block + text-align: center;

Выравнивание с помощью line-height

Outer {
height: 200px;
line-height: 200px;
}
.inner {
white-space: nowrap;
overflow: hidden;
}
http://jsfiddle.net/c1bgfffq/12/

Также данную технику можно применять и для выравнивания многострочного текста, если для внутреннего блока переопределить значение line-height , а также добавить правила display: inline-block и vertical-align: middle .

Outer {
height: 200px;
line-height: 200px;
}
.inner {
line-height: normal;
display: inline-block;
vertical-align: middle;
}
http://jsfiddle.net/c1bgfffq/15/

Минус данного способа заключается в том, что должна быть известна высота внешнего блока.

CSS — Выравнивание по горизонтали

1. Выравнивание одного блочного элемента (display: block) относительно другого (в котором он расположен) по горизонтали:

…

…

Block {
margin-left: auto;
margin-right: auto;
}

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 6.0+
• Opera 3.5+
• Safari 1.0+

2. Выравнивание строчного (display: inline) или строчно-блочного (display: inline-block) элемента по горизонтали:

…

…

Parent {
text-align: center;
}
.child {
display: inline-block;
}

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

Вертикальное и горизонтальное центрирование в CSS уровня 3

Мы можем расширить оба метода, чтобы центрировать по горизонтали и по вертикали одновременно.

Побочный эффект абсолютного позиционирования абзаца состоит в том, что абзац становится ровно таким широким, каким он должен быть (если только мы явно не укажем ширину). В примере ниже мы именно этого и хотим: мы размещаем по центру абзац из одного слова (“Центр!“), так что ширина абзаца должна быть равна ширине этого слова.

Центр!

Жёлтый фон наглядно демонстрирует, что абзац действительно той же ширины, что и его содержимое. Мы подразумеваем, что разметка осталась прежней:

<div class=container4>
  <p>Центр!
</div>

В плане вертикального центрирования эта таблица стилей схожа с таблицей из предыдущего примера. Но теперь мы ещё перемещаем элемент на полпути через контейнер с помощью правила ‘left: 50%’ и одновременно сдвигаем его влево на половину своей собственной ширины в преобразовании ‘translate’:

div.container4 {
    height: 10em;
    position: relative }
div.container4 p {
    margin: 0;
    background: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) }

Следующий пример объясняет, зачем требуется правило ‘margin-right: -50%’.

Когда форматер CSS поддерживает ‘flex’, всё становится ещё легче:

Центр!

с этой таблицей стилей:

div.container6 {
  height: 10em;
  display: flex;
  align-items: center;
  justify-content: center }
div.container6 p {
  margin: 0 }

Как выровнять текст в Ворде по обоим краям

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

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

При работе с текстом, особое внимание уделяется его расположению. Чаще всего в редакторе автоматически установлено выравнивание по левому краю

Изменить расположение текста можно, воспользовавшись специальными кнопками.

Некоторые пользователи, не зная этого, пытаются сделать размещение текста ровным при помощи пробелов. На такой способ не удобен и занимает много времени. Тем более правильно выровнять текст «на глаз»практически невозможно. Если вы пишите дипломную работу, где оформление играет важную роль, ее могут просто не принять.

Вариант 3. Известна высота внутреннего блока

Два способа абсолютного позиционирования

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

Способ #1. Растягивание

Притянем внутренний блок одновременно к верху и низу внешнего и позволим браузеру самостоятельно рассчитать отступы:

Способ #2. Отрицательный маргин

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

Выравнивание через свойство display: inline-block

По умолчанию элементы DIV считаются блочными, и значение display у них стоит block. Для этого метода вам нужно будет переопределить это свойство. Подходит только для DIV с родительским контейнером:

Элементу с классом outer-div назначается свойство text-align со значением center, которое располагает текст внутри по центру. Но пока браузер видит вложенный DIV как блочный объект. Чтобы свойство text-align сработало, inner-div должен восприниматься как строчный. Поэтому в таблице CSS для селектора inner-div вы пишете следующий код:

Вы меняете свойство display с block на inline-block.

Как выровнять несколько картинок по центру в css

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

Выравнивание нескольких изображений по центру в css делается с помощью размещения всех картинок
внутри родительского тега <div>, который по умолчанию уже является блочными элементом,
т. е. растянут на всю ширину.
Но у тега <div> по умолчанию строчное выравнивание по левому краю, поэтому нужно установить
свойству text-align значение «center», тогда все его содержание будет выровнено по центру.
Должно получиться примерно так: <div style=»text-align:center»>…тут картинки…</div>.

Дополнительно у каждого изображения можно задать отступы, чтобы они не слипались друг с другом, а находились на некотором
расстоянии между собой. Отступы делаются, через то же свойство margin, рассмотренное выше.
У margin: y1 x1 y2 x2, цифры в пикселях y1 x1 y2 x2 отвечают за отступ сверху, справа, снизу и
слева соответственно.

Пример как выровнять 3 изображения по центру в css

Результат в браузереКод страницы
<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″ />
<title>Тестовая страница</title>
</head>
<body>
<div style=»text-align:center»>
<img src=»my_img/1.jpg» style=»margin:0px 10px 0px 10px; » >
<img src=»my_img/1.jpg» style=»margin:0px 10px 0px 10px; » >
<img src=»my_img/1.jpg» style=»margin:0px 10px 0px 10px; » >
</div>
</body>
</html>

Советы как выровнять текст в Ворде

Здравствуйте, мои дорогие читатели! Я продолжаю раскрывать вам секреты работы с Word и сегодня расскажу о том, как выровнять текст в Ворде. Когда вы узнаете, как это делается, то будете приятно удивлены тому, насколько это просто. Когда-то я тоже не умел этого делать, но теперь для меня это не составляет труда.

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

В этой статьей Вы изучите основы форматирования абзацев в Word и приобретете знание о том, как выровнять края или как убрать выравнивание, если внесенные изменения вас не устроили.

Корректировка параметров абзаца

Для органичного расположения текста на листе первым делом выделите текст для форматирования и нажмите на мыши правую кнопку. Из появившегося списка выберите «Абзац».

Если Вы проделаете все действия правильно, на экране монитора появится окно, как на скриншоте:

Положение текста на странице изменяется на вкладке «Отступы и интервалы» в специальном поле. Вам также доступна возможность изменить отступ.

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

С помощью кнопок на панели быстрого доступа

Чтобы каждый раз не вызывать окно «Абзац», то удобнее воспользоваться панелью быстрого доступа. Нужно только перейдите на вкладку «Главная» и найти кнопки. Давайте вместе разберемся, что эти кнопки делают:

Изначально текст прижимается к левому краю, а чтобы вам сделать выравнивание текста по ширине страницы, то достаточно нажать на соответствующую кнопку.

Горячие клавиши

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

• Нажав Ctrl вместе с клавишей L, Вы выровняете текст влево;
• При аналогичной комбинации с клавишей E – текст будет расположен по центру;
• Клавиша R в сочетании с Ctrl поможет перенести абзац в правый край;
• Текст будет равномерно распределен в строке, если вместе с Ctrl нажмете клавишу J.

Отмена выравнивания

Произведенные действия по форматированию абзацев убираются при помощи кнопки в виде движущейся против часовой стрелки (смотрите рисунок ниже). Да и вообще, все последние действия отменяются этой клавишей.

У этой кнопки есть еще и горячие клавиши, которые многие знают. А если вы не знаете? Самое время узнать! CTRL + Z

Также, отменить любое выравнивание в тексте можно:

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

Советы по выравниванию текста в Ворде Ссылка на основную публикацию

Вертикальное выравнивание

Flexbox дает два способа вертикального позиционирования колонок.

Выравниваем колонки внутри ряда относительно верха, середины, низа, если позволяет высота. Указываем у row классы flex-items-xs-start, flex-items-xs-center, flex-items-xs-end.

XHTML

<div class=»container»>
<div class=»row align-items-start color_containter»>
<div class=»col item»>
По верху
</div>
<div class=»col item»>
По верху
</div>
<div class=»col item»>
По верху
</div>
</div>
<div class=»row align-items-center color_containter»>
<div class=»col item»>
По центру
</div>
<div class=»col item»>
По центру
</div>
<div class=»col item»>
По центру
</div>
</div>
<div class=»row align-items-end color_containter»>
<div class=»col item»>
По низу
</div>
<div class=»col item»>
По низу
</div>
<div class=»col item»>
По низу
</div>
</div>
</div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<div class=»container»> <div class=»row align-items-start color_containter»> <div class=»col item»>       По верху </div> <div class=»col item»>       По верху </div> <div class=»col item»>       По верху </div> </div> <div class=»row align-items-center color_containter»> <div class=»col item»>       По центру </div> <div class=»col item»>       По центру </div> <div class=»col item»>       По центру </div> </div> <div class=»row align-items-end color_containter»> <div class=»col item»>       По низу </div> <div class=»col item»>       По низу </div> <div class=»col item»>       По низу </div> </div> </div>

Также можно выровнять колонки внутри одного ряда относительно друг друга, если колонки будут использовать классы align-self-start, align-self-center, align-self-end.

XHTML

<div class=»container»>
<div class=»row color_containter»>
<div class=»col align-self-start item»>
One of three columns
</div>
<div class=»col align-self-center item»>
One of three columns
</div>
<div class=»col align-self-end item»>
One of three columns
</div>
</div>
</div>

1 2 3 4 5 6 7 8 9 10 11 12 13

<div class=»container»> <div class=»row color_containter»> <div class=»col align-self-start item»>       One of three columns </div> <div class=»col align-self-center item»>       One of three columns </div> <div class=»col align-self-end item»>       One of three columns </div> </div> </div>

Основные примеры

Следующие примеры демонстрируют, как некоторые из Box Alignment Properties применяются в Grid and Flexbox.

В этом примере с использованием Grid Layout, в контейнере сетки есть дополнительное пространство после прокладки фиксированных дорожек ширины на основной оси. Это пространство распределяется с помощью . На блочной (поперечной) оси выравнивание элементов внутри их областей сетки контролируется с помощью . Первый элемент переопределяет значение элементов выравнивания, заданное в группе, путём установки в центр.

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

Выравнивание по центру с помощью vertical-align по вертикали

Первые два варианта позволяют нам выровнять <div> по центру. А как нам быть, если нам нужно выровнять элемент по вертикали? В этом случае мы можем воспользоваться свойством vertical-align со значением middle.

Особенности использования:

1. 1.Данное свойство работает только для табличных элементов. Соответственно выравниваемый элемент должен находиться в ячейке таблицы. Или же он должен находиться в родительском блоке, которому присвоено свойство display:table-cell;, а данный родительский блок должен находится в блоке со значением display:table;

   HTML:

   CSS:

   PHP

   .parent-block3{
   display:table;
   }
   .child-block3{
   display:table-cell;
   vertical-align:middle;
   }
   .sub-child-block{
   width:50%;
   }

   1 2 3 4 5 6 7 8 9 10 11 12

   .parent-block3{ displaytable; }   .child-block3{ displaytable-cell; vertical-alignmiddle; }   .sub-child-block{ width50%; }

   Результат:

   Выравнивание div по центру по вертикали

2. 2.В случае, если для выравниваемого элемента задано абсолютное позиционирование, то <div> будет выровнен по верхней границе блока:

Display: flex и выравнивание

Если Вас не сильно заботят пользователи Explorer 8 или заботят так сильно, что Вы готовы ради них вставить кусок лишнего javascript-a, то можно применять «display: flex». Flex-блоки отлично справляются с проблемами выравнивания, и достаточно написать «margin: auto» для центрирования контента внутри.

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

Ну вот и все, что я хотела написать про CSS выравнивание. Теперь центрирование контента не будет представлять собой проблему!

Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах.
Ниже представлены основные способы решения задачи, их плюсы и минусы. Чтобы понимать суть примеров, рекомендую уменьшить высоту / ширину окошка Result в примерах по указанным ссылкам.

Вариант 1. Отрицательный отступ.

блок
блока
блок

Parent {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;
}
.block {
width: 250px;
height: 250px;
position: absolute;
top: 50%;
left: 50%;
margin: -125px 0 0 -125px;
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
border: none;
}
}

Вариант 2. Автоматический отступ.

блока
родителя

Parent {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;
}
.block {
width: 250px;
height: 250px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
border: none;
}
}

Вариант 3. Таблица.

родителю
родителя
блоку

Parent {
width: 100%;
height: 100%;
display: table;
position: absolute;
top: 0;
left: 0;
> .inner {
display: table-cell;
text-align: center;
vertical-align: middle;
}
}
.block {
display: inline-block;
img {
display: block;
border: none;
}
}

Чтобы добавить скролл в данный пример, придётся добавить в конструкцию ещё один элемент.
Пример: jsfiddle.net/serdidg/fk5nqh52/3 .

Вариант 4. Псевдо-элемент.

родителя
псевдо-элементу
блока
блок
псевдо-элемент
родителя
родителю
блока
родителем
блоком

Parent {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;
white-space: nowrap;
text-align: center;
font-size: 0;
&:before {
height: 100%;
display: inline-block;
vertical-align: middle;
content: «»;
}
}
.block {
display: inline-block;
white-space: normal;
vertical-align: middle;
text-align: left;
img {
display: block;
border: none;
}
}

Либо, если вам нужно, чтобы родитель занимал только высоту и ширину окна, а не всей страницы:

Parent {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
white-space: nowrap;
text-align: center;
font-size: 0;
&:before {
height: 100%;
display: inline-block;
vertical-align: middle;
content: «»;
}
}
.block {
display: inline-block;
white-space: normal;
vertical-align: middle;
text-align: left;
img {
display: block;
border: none;
}
}

Вариант 5. Flexbox.

Parent {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
overflow: auto;
}
.block {
background: #60a839;
img {
display: block;
border: none;
}
}

Вариант 6. Transform.

использования css

Parent {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
overflow: auto;
}
.block {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
img {
display: block;
}
}

Вариант 7. Кнопка.

блок

Parent {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;
background: none;
border: none;
outline: none;
}
.block {
display: inline-block;
img {
display: block;;
border: none;
}
}

Бонус

блока

Так же можно выравнивать картинку по центру, и в случае если картинка больше родителя
, масштабировать её по размеру родителя
.
Пример: jsfiddle.net/serdidg/nfqg9rza/3 .
Пример c большой картинкой:

Выравнивание элементов на блоке или столбце по оси

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

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

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

Свойство устанавливает свойство для всех дочерних элементов сетки. Это означает, что вы можете установить свойство индивидуально, используя по элементу сетки.

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

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

Это поведение было уточнено в спецификации, при этом браузеры ещё не реализовали правильное поведение. Пока это не произойдёт, вы можете убедиться, что элементы не растягиваются, например изображения, которые являются прямыми дочерними элементами сетки, путём установки и (en-US) . Это будет имитировать правильное поведение после его реализации.

Атрибут align тега

Еще один способ размещения по центру вообще не требует использования никаких
стилей и связан с атрибутом align тега <div>.
Указывая значение center, заставляем содержимое слоя выравниваться по его
центру. Поэтому необходимо создать два слоя, один из которых будет служить
контейнером для другого, как показано в примере 4.

Пример 4. Атрибут align

Опять же, как и в случае использования свойства text-align,
размещаться по центру будет и текст внутри слоя. Поэтому следует насильно
задать ему необходимое выравнивание через стили. Ширину слоя-контейнера задавать
не требуется, она будет вычисляться автоматически и занимать все доступное
пространство веб-страницы.

Какой способ выбрать?

• Для вертикального выравнивания текста лучше использовать вертикальные отступы или свойство line-height .
• Для абсолютно позиционированных элементов с известной высотой (например, иконок) идеально подойдет способ с отрицательным свойством margin-top .
• Для более сложных случаев, когда неизвестна высота блока, нужно использовать псевдоэлемент или свойство transform .
• Ну а если вам повезло настолько, что не нужно поддерживать старые версии браузера IE, то, конечно, лучше использовать Flexbox .

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