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

vertical-align: middle

Свойство CSS выравнивает элемент по вертикали относительно родительского элемента, окружающего текста или ячейки таблицы. Однако с ним не все так просто. Это свойство работает только для inline-элементов (span, img и т.д) и элементов с ;

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

Для того, чтобы этот метод работал, как задумано, нужно задать абсолютные (в px) размеры родительского элемента. У дочернего элемента ширина и высота могут быть относительными (например, в %).

transform: translate()

Свойство CSS позволяет двигать, вращать, изменять размер и форму элемента. Этот инструмент настоящий must have для создания современных адаптивных и интерактивных дизайнов. Поэтому ему будет посвящена отдельная статья (а может и две 😉

В рамках этой статьи рассмотрим использование свойства c функцией в качестве значения. Суть метода сводится к следующему:

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

Или не совсем по центру? Дело в том, что по центру выравнивается левый верхний угол блока (так сказать, начало его координат). Если блок имеет фиксированный размер и он нам известен, можно сдвинуть его (блок) на расстояние равное половине размера при помощи свойства

Итак, мы выровняли элемент по центру. Или не совсем по центру? Дело в том, что по центру выравнивается левый верхний угол блока (так сказать, начало его координат). Если блок имеет фиксированный размер и он нам известен, можно сдвинуть его (блок) на расстояние равное половине размера при помощи свойства .

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

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

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

HTML:

CSS:

Этот способ выравнивания картинки css работает практически всегда. Задавать изображению класс не обязательно. Вы можете обратиться к нему через класс блока в котором оно находится. Например:

Так же можно воспользоваться альтернативным вариантом выравнивания картинки по центру, обернув изображение в абзац тегом <p> и, по аналогии с вариантом для HTML, задать абзадцу свойство text-align:center.

HTML:

CSS:

С помощью показанных в этой статье способов выравнивания картинок в html и css вы сможете выровнять нужное вам изображение практически в любой ситуации. В своей практике я стараюсь чаще использовать вариант с использованием text-align:center; или margin:auto, в зависимости от ситуации.

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

Желаю вам успехов в создании своего сайта! До встречи в следующей статье!

С уважением Юлия Гусарь

Уже давно существуют разные методы выравнивания картинок по центру с помощью CSS. На реализацию этих методов сильно влиял Internet Explorer 5. Но сегодня эта версия браузера мало кого интересует, поэтому можно избавиться от лишнего кода.

Раньше IE5 и IE5.5 диктовали свои правила — для того, чтобы выровнять элемент страницы по центру, необходимо использовать CSS-свойство . И чтобы отцентровать, например, картинку, необходимо размещать её внутри дополнительного блока:

Для этого дополнительного блока присваивается соответствующие CSS-свойство:

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

Но IE5 и IE5.5 уже в прошлом, поэтому HTML-код можно сделать проще и элегантнее:

Отсутствие ненужных дополнительных блоков достигается благодаря соответствующему CSS:

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

Нужно присвоить разные отступы сверху и снизу? Без проблем. Не забываем про сокращения:

К сожалению, в отличие от случаев выравнивания картинок по левому и правому краям ( и ), нет возможности стандартными методами завёртывать текст вокруг отцентрованной картинки

Конечно, если это очень важно, то выполнимо

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

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

Поставить картинку по центру div align + display

Используем для второго варианта установки img по центру с помощью align + display:

Для этого нам понадобится, опять тег картинки img с атрибутом src:

<img src=»https://dwweb.ru/путь/new_logo.png»>

Обернем нашу картинку в div

<div id=»kartinka_po_tsentru»>
<img src=»https://dwweb.ru/путь/new_logo.png»>
</div>

Применим стили для данного дива :

div#kartinka_po_tsentru {
text-align: center;
height: 200px;
width: 740px;
background: beige;
vertical-align: middle;
display: table-cell;
}

Соберем весь код вместе, который поставит нашу картинку по центру

Html:

<div id=»kartinka_po_tsentru»>

<img src=»https://dwweb.ru/genm/new_logo.png» >

</div>

style:

div#kartinka_po_tsentru {

text-align: center;

height: 200px;

width: 740px;

background: beige;

vertical-align: middle;

display: table-cell;

}

Результат расположения картинки по центру внутри div:

Как видим… наша картинка благополучно расположилась по центру div:

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения

Атрибуты и свойства тега

1. Свойство align=»параметр» — определяет выравнивание рисунка. Это значение так же влияет на то, как текст будет обтекать рисунок. Может принимать следующее параметры:

• left — выравнивание по левому краю
• middle — выравнивание середины изображения по базовой линии текущей строки
• bottom — выравнивание нижней границы изображения по окружающему тексту
• top — верхняя граница изображения выравнивается по самому высокому элементу текущей строки
• right — выравнивание по правому краю

Пример 3.1. Выравнивание изображения в html по правому краю

Преобразуется на странице в следующее:

2. Свойство alt=»текст» — подсказка/описание картинки. Выполняет сразу две важные функции:

• Выдает подсказку при наведении
• Если в браузере отключены изображения, то выводится этот текст

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

3. Свойство border=»ЧИСЛО» — задает толщину рамки обтекающей изображение. Измеряется в пикселях. Более подробно читайте в отдельной статье: свойство CSS border

Пример 3.2. Вывод картинки в html с рамкой (границей)

Преобразуется на странице в следующее:

4. Свойство bordercolor=»цвет» — задает цвет рамки, которая обтекает изображение. Имеет смысл, только если атрибут border больше 0.

Пример 3.3. Вывод картинки в html с цветной рамкой

Результат можно видеть чуть выше.

Примечание

Атрибуты border и bordercolor можно задать в стилях CSS к img:

5. Свойство height=»ЧИСЛО» — задает высоту изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 400х200, а мы укажем высоту 150 пикселей, то оно сжимается до 300х150 (на 25% меньше), т.е. пропорционально.

6. Свойство width=»ЧИСЛО» — задает ширину изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 1000х800, а ширина указывается 1200 пикселей, то оно автоматически расширяется на 20% до 1200х960.

7. Свойство hspace=»ЧИСЛО» — задает горизонтальный отступ изображения в пикселях от других объектов html.

8. Свойство vspace=»ЧИСЛО» — задает вертикальный отступ изображения в пикселях от других объектов html.

Примечание

Вместо hspace и vspace советую применять старый и проверенный margin (более подробно про него можете прочитать в уроке про описание стилей html). Кратко напомню:

• margin-top: X px; (X — отступ сверху)
• margin-bottom: Y px; (Y — отступ внизу)
• margin-left: L px; (L — отступ слева)
• margin-right: R px; (R — отступ справа)

Задают отступы от объектов в пикселях. Допускаются отрицательные значения. По умолчанию либо наследуется значение предка, либо имеет значение 0.

Например. Отступ слева составляет 50 пикселей, а сверху 10 пикселей.

Преобразуется на странице в следующее:

В данном примере — отступ сверху составил 10 пикселей, слева 50 пикселей.

9. Свойство class=»имя_класса» — можно присвоить класс изображению, чтобы задать стиль всем изображениям этого класса.

Глобальный примерчик

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

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
36
37
38

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фотография с подписью</title>
  <style>
 body {
background: url(https://delaisait.ucoz.ru/_ph/9/873853212.jpg) no-repeat;
background-size: cover;
}
div {
 margin: 9% 20% 10% 20%;
 width: 60%;
font-size: 22px;
}
h2 { color: red; font-size: 35px; font-family: Arial; border-bottom: 3px double; text-align:center;}
p {text-align:justify;}
img {
   border: 1px solid;
   margin-bottom: 3px;
    padding: 19px;
    background:#CD853F; 
}
#photo {text-align: center;}
#f-photo, #f-text {float: right; width: 50%;}
  </style>
 </head>
 <body>
<div>
<h2>Владимир Креститель</h2>
 <p id="photo"><img src="http://nevsky.kharkiv.org/wp-content/uploads/2013/07/%D0%9A%D1%80%D0%B5%D1%89%D0%B5%D0%BD%D0%B8%D0%B5-%D0%A0%D1%83%D1%81%D0%B8-580x250.jpg" alt="Владимир"></p>
<p>Владимир Святославич по легендам и старинным былинам известен еще и как Владимир Красное Солнышко.</p>
<p id="f-text">Он выпускал свои собственные монеты. На фотографии изображен златник.</p>
<p id="f-photo"></p>
 
</div>
 </body>
</html>

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

Пока-пока!

 
Прочитано: 214 раз

как наложить текст на картинку html

1. Как поставить картинку по центру картинки!? Как вообще написать текст на картинке html?

   Нам понадобится блок div с id «id=»tekst_sverhu_kartinki»»

   Позиция будет «position: relative;»

   Во внутрь поместим картинку и новый блок div с class-ом «class=»tekst_sverhu_kartinki»»

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

   Html:

   <div id=»tekst_sverhu_kartinki»>

   <img src=»https://dwweb.ru/__img/__img_rotate/more.png » alt=»Текст сверху картинки»>

   <div class=»tekst_sverhu_kartinki»>Текст сверху картинки</div>

   </div>

   Css:

   <style>

   div#tekst_sverhu_kartinki {

   position: relative;

   }.tekst_sverhu_kartinki {

   position: absolute;

   top: 50%;

   left: 65px;

   text-transform: uppercase;

   color: white;

   width: 350px;

   background: #00000094;

   padding: 10px;

   text-align: center;

   font: bold 24px/34px Helvetica, Sans-Serif;

   }

   </style>

   Текст сверху картинки

2. Для того, чтобы поставить текст сверху картинки в html. Нам понадобится каркас div внутри картинка img + span

   Html:

   <div id=»tekst_sverhu_kartinki»>

   <img src=»https://dwweb.ru/__img/__img_rotate/more.png » alt=»Текст сверху картинки»>

   <div class=»tekst_sverhu_kartinki_1″>

   <span>Наш отдых</span><br>

   <span>Лучшие моменты</span>

   </div>

   </div>

   css:

   div#tekst_sverhu_kartinki {

   position: relative;

   }

   .tekst_sverhu_kartinki_1 {

   position: absolute;

   bottom: 10%;

   text-transform: uppercase;

   color: #c9c9c9;

   width: 300px;

   }

   .tekst_sverhu_kartinki_1 span {

   font: bold 24px/44px Helvetica, Sans-Serif;

   background: #00000094;

   padding: 8px;

   }

   Наш отдыхЛучшие моменты

3. Ну и следующий вариант → «При наведении на картинку появляется текст html» :

   Не стал делать отдельным пунктом — текст справа. Этот вариант можно немного модифицировать(убрать hover и у текста убрать opacity: 0) и будет у вас тест справа на картинке.

   Html:

   <div id=»tekst_sverhu_kartinki_sprava_1″>

   <img src=»https://dwweb.ru/__img/__img_rotate/more.png » alt=»Текст сверху картинки»>

   <div class=»tekst_sverhu_kartinki_sprava_1 «>

   <span>Наш отдых</span><br>

   <span>Лучшие моменты</span>

   </div>

   </div>

   css:

   div#tekst_sverhu_kartinki_sprava_1{

   position: relative;

   width: 500px;

   }

   #tekst_sverhu_kartinki_sprava_1:hover .tekst_sverhu_kartinki_sprava_1 {

   transition: 2s;

   opacity: 1;

   cursor: pointer;

   }

   .tekst_sverhu_kartinki_sprava_1 {

   position: absolute;

   bottom: 10%;

   text-transform: uppercase;

   color: #c9c9c9;

   width: 300px;

   right: 0px;

   text-align: right;

   opacity: 0; transition: 2s;

   }

   .tekst_sverhu_kartinki_sprava_1 span {

   font: bold 24px/44px Helvetica, Sans-Serif;

   background: #00000094;

   padding: 8px;

   }

   Наш отдыхЛучшие моменты

комментарии ушли на обновление!

Как сделать картинку фоном?

Любую картинку можно сделать фоном. Для этого в теге body пропишите атрибут background.

<body background=»ваш_фон.jpg»>

На картиночном фоне может отображаться текст.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Как вставить ссылку-якорь в html</title>
</head>
<body background="kartinka.jpg">

<p>текст</p>
<p>текст</p>

</body>
</html>

Результат:

Картинка как фон

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

<center><img src=»kartinka.jpg»></center>

Вот теперь точно все. Переходим к следующему уроку.

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

Популярные статьи:

• Как узнать id компьютера
  Дата: 29 марта 2013
  Прокомментировано:90
  просмотров: 319035

• Размеры форматов листов А0 – А7
  Дата: 23 января 2013
  Прокомментировано:3
  просмотров: 267229

• Смешные логические загадки с подвохом, отгадки прилагаются
  Дата: 12 ноября 2014
  Прокомментировано:5
  просмотров: 191788

• Установка windows 7 на ноутбук
  Дата: 18 декабря 2012
  Прокомментировано:169
  просмотров: 183540

• Как включить или отключить Aero в Windows 7
  Дата: 1 июня 2013
  Прокомментировано:6
  просмотров: 156896

Элемент

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

Элемент содержит ряд элементов <source>, каждый из которых ссылается на различные источники изображения. Таким образом, обозреватель может выбрать изображение, которое наилучшим образом соответствует текущему виду и/или устройству.

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

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

Пример

Показать одно изображение, если окно обозревателя (видовой экран) не менее 650 пикселей, а другое изображение, если нет, но больше, чем 465 пикселей.

<picture>  <source media=»(min-width: 650px)» srcset=»img_pink_flowers.jpg»>
 
<source media=»(min-width: 465px)» srcset=»img_white_flower.jpg»>  <img src=»img_orange_flowers.jpg»
alt=»Flowers» style=»width:auto;»></picture>

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

Центрирование по вертикали в CSS уровня 3

Уровень 3 CSS предлагает и другие возможности. На момент
написания этой статьи (2014 год), хороший способ вертикального
выравнивания блока без использования абсолютного позиционирования
(что может приводить к частичному перекрытию текста) всё ещё
обсуждается. Но если вам известно, что частичное перекрытие текста
не станет проблемой в вашем документе, вы можете использовать
свойство ‘transform’, чтобы выровнять по центру абсолютно
позиционированный элемент. Например:

Этот абзац выровнен вертикально по центру.

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

<div class=container3>
  <p>Этот абзац…
</div>

таблица стилей выглядит так:

div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div.container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */

Основные правила:

1. Сделайте контейнер относительно позиционированным
   (position: relative), что превратит его в контейнер для абсолютно
   позиционированных элементов.

2. Сам элемент сделайте абсолютно позиционированным
   (position: absolute).

3. Поместите элемент посередине контейнера с помощью ‘top: 50%’.
   (Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)

4. Используйте translate, чтобы переместить элемент вверх на
   половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’
   указывают на высоту самого элемента.)

Недавно (начиная приблизительно с 2015-го года) в нескольких
реализациях CSS стала доступна новая техника. Она основана на новом
ключевом слове ‘flex’ для свойства ‘display’. Это ключевое слово
предназначено для использования в графическом интерфейсе
пользователя (GUI), но ничто не мешает вам использовать его в
документе, если у этого документа правильная структура.

Этот абзац выровнен по центру вертикально.

таблица стилей выглядит следующим образом:

Применение CSS — выравнивание по центру HTML

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

CSS можно использовать, чтобы:

• Центрировать текст;
• Центрировать блочный элемент (например, div);
• Центрировать изображение;
• Вертикально центрировать блок или изображение.

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

Выравниваем картинки по центру в HTML

В его значении укажите left, если хотите выравнять изображение по левому краю страницы, либо значение right — по правому краю. По умолчанию изображение всегда выравнивается по левому краю страницы:

  <img src=»https://steptosleep.ru/wp-content/uploads/2018/06/1981.jpg» align=»right»>  

Вертикальное выравнивание изображения

С помощью того же атрибута align=»» можно управлять расположением изображения и по вертикали. Для этого в его значении нужно прописать top для выравнивания по верхней границе, middle — по середине и bottom — по нижней границе:

  <img src=»https://steptosleep.ru/wp-content/uploads/2018/06/84293.jpg» align=»top»>  

Замечание: запись images/photo.jpg означает, что изображение находится не в одной директории, а в папке images.

Выравнивание изображения по центру страницы

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

<center> <img src=»https://steptosleep.ru/wp-content/uploads/2018/06/1981.jpg» align=»top»> </center>

1.1 Введение в html

1.2 Структура html-документа

2.1 Абзац в html

2.2 Заголовки в html

2.3 Цитаты и комментарии в html

2.4 Теги пробелов и переноса в html

3.1 Нумерованный список html

3.2 Маркированный список

3.3 Вложенные списки

4.1 Выделение html текста

4.2 Гарнитура и размер шрифта

4.3 Изменение цвета текста в html

4.4 Границы и фон страницы

5.1 Вставка изображения на сайт

HTML изображение по центру страницы

или все возможные способы размещения изображений по центру

Код примера:

Посмотреть результат в новом окне: HTML изображение по центру страницы

На что здесь необходимо обратить внимание? → Во-первых, на то, что обозначены размеры — это ускоряет загрузку изображения. Во-вторых, прописаны атрибуты alt=»», что также крайне желательно делать, даже если альтернативный текст отсутствует

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

ELinks

Возможности : Настройка : Использование : Скриншоты : Где скачать ELinks является попыткой создать современный текстовый веб браузер. Проект начался на основе кода браузера Links. Его целью сначала было попытаться реализовать несколько функций более или менее отсутствующих / слабых в Links. Откуда «E» в «ELinks» — «Experimental» / «Экспериментальный» . После успеха предпринятых усилий «E» стала пониматься как «Extended» / «Расширенный» или «Enhanced» / «Усовершенствованный».

В этой статье мы коснемся вопроса выравнивания по центру различных элементов html при помощи css свойств. 

Довольно часто появляется необходимость выровнять div по центру или выровнять его содержимое. Существует несколько способов это сделать. Некоторые способы подходят для выравнивания текста, картинок и другого, но не подходят для выравнивания блоков.

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

В этом случае все просто — для родительского элемента задаем свойство text-align со значением center. Такой способ выровнять текст по центру при помощи css самый простой и удобный. Для более глубокого понимания приведу пример

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

HTML-код:

CSS-код:

С самым простым — выравниванием текста и изображений при помощи css по центру страницы мы разобрались.

Теперь перейдем к способам выравнивания элементов вроде блочного типа(div, table). В этом случае мы будем выравнивать по центру не содержимое, а сами таблицы, блоки, абзацы.

Всего я предлагаю два варианта при помощи CSS: используя свойство margin и используя свойства position c left

Важно заметить, что ни один из этих способов не будет работать, если у вас не задана фиксированная ширина элемента, не важно в px, % или чем ещё

Таким образом, первым делом решаем, в каких единицах и какая будет ширина элемента, который мы хотим выровнять по центру.

Выравнивание по центру при помощи margin

Для метода при помощи margin не важно, в процентах или пикселях вы задает эту ширину. Для центрирования по этому методу, вам нужно в качестве значений свойства margin поставить следующие 0 auto

Если более конкретно, то для боковых отступов значение должно быть auto, а для верхнего и нижнего можно задавать любые внешние отступы. Т.е. развернутый вариант значения выглядит так 0 auto 0 auto, либо так 10px auto 5% auto.

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

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

Далее приводится пример выравнивания при помощи этого метода.

HTML-код:

CSS-код:

Выравнивание по центру при помощи position и left

Такой вариант подойдет не для любого элемента.

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

Во-вторых, родительскому тэгу должно быть задано свойство position с значением relative/absolute/fixed, любым из перечисленных. 

Теперь нужно так же задать любое из этих значений свойства position для выравниваемого элемента. Потом взять 100 вычесть ширину этого элемента и поделить получившееся число на 2. Получившееся значение и будет тем, которое нужно указать для left (стоит отметить, что это свойство можно заменить на right, как обычно это не существенно). Благодаря таким свойствам нужный div или таблица будут размещены по центру родительского элемента.

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

Посмотрите сами, как это работает.

HTML-код:

CSS-код:

Плавающий div

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

Обратите внимание, что плавающий div размещается до нашего вложенного элемента в коде HTML

CSS:

#parent {height: 250px;}
#floater {
	float: left;
	height: 50%;
	width: 100%;
	margin-bottom: -50px;
}
#child {
	clear: both;
	height: 100px;
}

Мы смещаем пустой div влево или вправо и задаем для него высоту 50% родительского элемента. Таким образом, он будет заполнять верхнюю половину родительского элемента.

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

Верхняя граница вложенного элемента div находится непосредственно под нижней границей пустого элемента div. Нам нужно сместить вложенный элемент вверх на половину высоты плавающего пустого элемента. Для решения задачи используется отрицательное значение свойства margin-bottom для плавающего пустого элемента div.

Данный метод также работает во всех браузерах. Однако его использование требует дополнительного пустого элемента div и знаний о высоте вложенного элемента.