На самом деле вам нужно два div для вертикального центрирования. Div, содержащий контент, должен иметь ширину и высоту.

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}

<div id = "container">
  <div id = "content">
    <h1>Centered div</h1>
  </div>
</div>

Вот результат

К сожалению - но не удивительно - решение сложнее, чем хотелось бы. Также, к сожалению, вам нужно будет использовать дополнительные div вокруг того div, которое вы хотите выровнять по центру.

Для совместимых со стандартами браузеров, таких как Mozilla, Opera, Safari и т. д., Вам необходимо настроить внешний div, который будет отображаться как Таблица, а внутренний div - как таблица-ячейка, который затем может быть центрирован по вертикали. Для Internet Explorer вам нужно должность внутреннего div абсолютно во внешнем div, а затем указать вершина как 50%. Следующие страницы хорошо объясняют эту технику и также предоставляют несколько примеров кода:

• Вертикальное центрирование в CSS
• Вертикальное центрирование в CSS с неизвестной высотой (совместимость с Internet Explorer 7) (больше не живу)
• Вертикальное центрирование в CSS с неизвестной высотой (совместимость с Internet Explorer 7) (Архивная статья любезно предоставлена ​​Wayback Machine)

Существует также метод вертикального центрирования с использованием JavaScript. Вертикальное выравнивание контента с помощью JavaScript и CSS демонстрирует это.

Ниже представлено лучшее универсальное решение, которое я мог построить для вертикального и горизонтального центрирования блока содержимого гибкая высота фиксированной ширины. Он был протестирован и работает с последними версиями Firefox, Opera, Chrome и Safari.

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /*whatever width you want*/
}

<div class = "outer">
  <div class = "middle">
    <div class = "inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

Посмотреть рабочий пример с динамическим содержимым

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

Это всегда то место, куда я иду, когда мне нужно вернуться в Эта проблема.

Для тех, кто не хочет прыгать:

1. Укажите родительский контейнер как position:relative или position:absolute.
2. Укажите фиксированную высоту дочернего контейнера.
3. Установите position:absolute и top:50% на дочернем контейнере, чтобы переместить верхнюю часть вниз к середине родительского контейнера.
4. Установите margin-top: -yy, где yy - половина высоты дочернего контейнера, чтобы сместить элемент вверх.

Пример этого в коде:

<style type = "text/css">
    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id = "myoutercontainer">
    <div id = "myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>

Я сделал это с помощью этого (измените ширину, высоту, margin-top и margin-left соответственно):

.wrapper {
    width:960px;
    height:590px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-295px;
    margin-left:-480px;
}

<div class = "wrapper"> -- Content -- </div>

Я считаю этот вариант наиболее полезным ... он дает наиболее точную H-образную раскладку и очень прост для понимания.

Преимущество этой разметки заключается в том, что вы определяете размер своего контента в одном месте -> «PageContent».
Цвета фона страницы и его горизонтальных полей определяются в соответствующих им div.

<div id = "PageLayoutConfiguration" 
     style = "display: table;
     position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
     width: 100%; height: 100%;">

        <div id = "PageBackground" 
             style = "display: table-cell; vertical-align: middle;
             background-color: purple;">

            <div id = "PageHorizontalMargins"
                 style = "width: 100%;
                 background-color: seashell;">

                <div id = "PageContent" 
                     style = "width: 1200px; height: 620px; margin: 0 auto;
                     background-color: grey;">

                     my content goes here...

                </div>
            </div>
        </div>
    </div>

А здесь с разделением CSS:

<div id = "PageLayoutConfiguration">
     <div id = "PageBackground">
          <div id = "PageHorizontalMargins">
               <div id = "PageContent">
                     my content goes here...
               </div>
          </div>
     </div>
</div>

#PageLayoutConfiguration{
   display: table; width: 100%; height: 100%;
   position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
}

#PageBackground{
   display: table-cell; vertical-align: middle;
   background-color: purple;
}

#PageHorizontalMargins{
   style = "width: 100%;
   background-color: seashell;
}
#PageContent{
   width: 1200px; height: 620px; margin: 0 auto;
   background-color: grey;
}

Еще одно, которого я не вижу в списке:

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}

• Кроссбраузерность (включая Internet Explorer 8 - Internet Explorer 10 без хаков!)
• Отзывчивый с процентами и мин- / макс-
• Центрировано независимо от заполнения (без изменения размера коробки!)
• height должен быть объявлен (см. Переменная высота)
• Рекомендуемая настройка overflow: auto для предотвращения распространения контента (см. Переполнение)

_{Source: Absolute Horizontal And Vertical Centering In CSS}

Чтобы центрировать div на странице, проверьте ссылку на скрипку.

#vh {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}

<div id = "vh" class = "box">Div to be aligned vertically</div>

Другой вариант - использовать гибкий блок проверьте ссылку на скрипку.

.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

<div class = "vh">
    <div>Div to be aligned vertically</div>
</div>

Другой вариант - использовать преобразование CSS 3:

#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}

<div id = "vh" class = "box">Div to be aligned vertically</div>

Изменить 2020: используйте это только в том случае, если вам нужно поддерживать старые браузеры, такие как IE8 (от чего вам следует отказаться ?). Если нет, используйте flexbox.

Это самый простой метод, который я нашел, и я использую его все время (jsFiddle здесь)

Благодарим Криса Койера из CSS Tricks за эта статья.

html, body{
  height: 100%;
  margin: 0;
}
.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 100%; 
}
.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}

<div class = "v-wrap">
    <article class = "v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>

Поддержка начинается с IE8.

Если кого-то интересует только Internet Explorer 10 (и более поздние версии), используйте flexbox:

.parent {
    width: 500px;
    height: 500px;
    background: yellow;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.centered {
    width: 100px;
    height: 100px;
    background: blue;
}

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

Поддержка Flexbox: http://caniuse.com/flexbox

Ответ от Billbad работает только с фиксированной шириной блока .inner. Это решение работает для динамической ширины, добавляя атрибут text-align: center к div .outer.

.outer {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  text-align: center;
  display: inline-block;
  width: auto;
}

<div class = "outer">
  <div class = "middle">
    <div class = "inner">
      Content
    </div>
  </div>
</div>

Я использую это. Работает в Internet Explorer 8 и более поздних версиях:

height:268px - для display:table действует как min-height.

CSS:

* {
  padding: 0;
  margin: 0;
}
body {
  background: #cc9999;
}
p {
  background: #f0ad4e;
}
#all {
  margin: 200px auto;
}
.ff-valign-wrap {
  display: table;
  width: 100%;
  height: 268px;
  background: #ff00ff;
}
.ff-valign {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  background: #ffff00;
}

HTML:

<body>

  <div id = "all">
    <div class = "ff-valign-wrap">
      <div class = "ff-valign">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
      </div>
    </div>
  </div>

</body>

Современный способ центрировать элемент по вертикали - использовать flexbox.

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

В приведенном ниже примере div будет центрирован в центре вашего браузера. Что важно (в моем примере), так это установить height: 100% в body и html, а затем min-height: 100% в ваш контейнер.

body, html {
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}

#center_container {
  align-items: center;
  display: flex;
  min-height: 100%;
}

#center {
  background: white;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  width: 200px;
}

<div id='center_container'>
  <div id='center'>I am center.</div>
</div>

Решение сосредоточившись на неизвестном отлично подходит для меня, особенно для родительских div с относительной (неизвестной) высотой. В статье есть несколько действительно хороших примеров кода.

Он был протестирован в Chrome, Firefox, Opera и Internet Explorer.

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

<div style = "width: 400px; height: 200px;">
   <div class = "block" style = "height: 90%; width: 100%">
  <div class = "centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>

Я просто нашел другой способ, который сработал для меня:

<div class = "container">
  <div class = "vertical">
     <h1>Welcome</h1>
     <h2>Aligned Vertically</h2>
     <a href = "#">Click ME</a>
   </div>
</div>

CSS

.vertical{
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Больше информации

Самый простой способ - это следующий 3 строки CSS:

1) положение: относительное;

2) верхний: 50%;

3) преобразовать: translateY (-50%);

Ниже приводится ПРИМЕР:

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>

Вертикальный и горизонтальный ЦЕНТР

HTML

<div id = "dialog">Centered Dialog</div>

CSS

#dialog {
    position:fixed; top:50%; left:50%; z-index:99991;
    width:300px; height:60px;
    margin-top:-150px;  /* half of the width */
    margin-left:-30px; /* half of the height */}

Наслаждаться!

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

.main-div {
    background: none repeat scroll 0 0 #999;
    font-size: 18px;
    height: 450px;
    max-width: 850px;
    padding: 15px;
}

.vertical-center {
    background: none repeat scroll 0 0 #1FA67A;
    color: #FFFFFF;
    padding: 15px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

<div class = "main-div">
    <div class = "vertical-center">
        <span>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span>
    </div>
</div>

Смотрите здесь полную статью

Чтобы выровнять прямоугольник на веб-странице по вертикали, включая Internet Explorer 6, вы можете использовать:

1. Условные комментарии
2. Свойство haslayout
3. display: table-value для других (а теперь шлейф)

Скрипка

/* Internet Explorer 8 and others */
.main {
  width: 500px;
  margin: auto;
  border: solid;
}
html {
  height: 100%;
  width: 100%;
  display: table;
}
body {
  display: table-cell;
  vertical-align: middle;
}

<!-- [if lte IE 7]>
<style> /* Should be in the <head> */
    html, body , .ie {
        height: 100%;
        text-align: center;
        white-space: nowrap;
    }
    .ie , .main{
        display: inline; /* Used with zoom in case you take a block element instead an inline element */
        zoom: 1;
        vertical-align: middle;
        text-align: left;
        white-space: normal;
    }
</style>
<b class = "ie"></b>
<!--[endif]-->
<div class = "main">
  <p>Fill it up with your content </p>
  <p><a href = "https://jsfiddle.net/h8z24s5v/embedded/result/">JsFiddle versie</a></p>
</div>

Фактически, Internet Explorer 7 может вызвать некоторые проблемы, поскольку является единственным, который строго применяет height: 100% к элементам HTML / body.

Но, это в прошлом и сегодня, и кто все еще возражает против старых версий Internet Explorer, table/table-cell в порядке, display: flex многообещающий, а display: grid когда-нибудь появится.

Еще один современный пример через flex

html {
  display: flex;
  min-height: 100vh;/* or height */
}

body {
  margin: auto;
}

<div>Div to be aligned vertically</div>

Просто сделайте это: добавьте класс на свой div:

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

И прочтите эта статья для объяснения. Примечание: необходим Height.

Вот простой способ, почти без кода:

Код CSS:

.main{
    height: 100%;
}

.center{
    top: 50%;
    margin-top: 50%;
}

HTML код:

<div class = "main">
    <div class = "center">
        Hi, I am centered!
    </div>
</div>

Ваш текст будет посередине страницы!

После долгих исследований я наконец нашел окончательное решение. Работает даже для плавающих элементов. Посмотреть источник

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}

Лучше всего было бы:

#vertalign{
  height: 300px;
  width: 300px;
  position: absolute;
  top: calc(50vh - 150px); 
}

150 пикселей, потому что в данном случае это половина высоты div.

Три строки кода, использующие transform, работают практически в современных браузерах и Internet Explorer:

.element{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
}

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

1. 'position' relative искажает стиль, если текущий div находится в теле и не имеет контейнера div. Однако «фиксированный», похоже, работает, но он, очевидно, исправляет содержимое в центре области просмотра.

2. Также я использовал этот стиль для центрирования некоторых оверлейных div и обнаружил, что в Mozilla все элементы внутри этого преобразованного div потеряли свои нижние границы. Возможно проблема с рендерингом. Но добавление минимального отступа к некоторым из них отображало его правильно. Chrome и Internet Explorer (что удивительно) отображали поля без каких-либо дополнений

Объявите этот Mixin:

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Затем включите его в свой элемент:

.element{
    @include vertical-align();
}

Следующее работает в моем случае и было протестировано в Firefox.

#element {
    display: block;
    transform: translateY(50%);
    -moz-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
}

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

Центрирование только по вертикали

Если вас не интересуют Internet Explorer 6 и 7, вы можете использовать метод, включающий два контейнера.

Внешний контейнер:

• должен иметь display: table;

Внутренний контейнер:

• должен иметь display: table-cell;
• должен иметь vertical-align: middle;

Поле содержимого:

• должен иметь display: inline-block;

Вы можете добавить любое содержимое в поле содержимого, не заботясь о его ширине или высоте!

Демо:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}

<div class = "outer-container">
   <div class = "inner-container">
     <div class = "centered-content">
        Malcolm in the Middle
     </div>
   </div>
</div>

См. Также эта рабочий пример!

Центрирование по горизонтали и вертикали

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

Внутренний контейнер:

• должен иметь text-align: center;

Поле содержимого:

• следует повторно отрегулировать горизонтальное выравнивание текста, например, на text-align: left; или text-align: right;, если вы не хотите, чтобы текст был центрирован

Демо:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}

<div class = "outer-container">
   <div class = "inner-container">
     <div class = "centered-content">
         Malcolm in the Middle
     </div>
   </div>
</div>

См. Также эта рабочий пример!

Для этого используйте свойство CSS Flexboxalign-items.

html, body {
    height: 100%;
}

body {
  display: flex;
  align-items: center;
}

<div>This is centered vertically</div>

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

<div class = "sweet-overlay">
    <img class = "centered" src = "http://jimpunk.com/Loading/loading83.gif" />
</div>

Ссылка на код:

http://codepen.io/damianocel/pen/LNOdRp

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

Этот метод не использует никаких преобразований. Так что проблем с расплывчатостью вывода не возникает.

position: absolute;
width: 100vw;
top: 25%;
bottom: 25%;
text-align: center;

В моем случае это сработало (проверено только в современных браузерах):

.textthatneedstobecentered {
  margin: auto;
  top: 0; bottom: 0;
}

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

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}

Решение flexbox - это очень простой способ для современных браузеров, поэтому я рекомендую вам следующее:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: green;
}

body,
html {
  height: 100%;
}

<div class = "container">
  <div>Div to be aligned vertically</div>
</div>

Следующая ссылка представляет простой способ сделать это с помощью всего 3 строк в вашем CSS:

Вертикальное выравнивание всего с помощью всего 3 строк CSS.

Credits to: Sebastian Ekström.

Я знаю, что на этот вопрос уже есть ответ, однако я увидел полезность в ссылке из-за ее простоты.

Содержимое можно легко центрировать с помощью flexbox. В следующем коде показан CSS для контейнера, внутри которого необходимо центрировать содержимое:

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

Это решение сработало для меня, если у вас есть блочный элемент (например). Я использовал цвета, чтобы сделать раствор более четким.

HTML:

<main class = "skin_orange">
<p>As you can the the element/box is vertically centered</p>
<div class = "bigBox skin_blue">Blue Box</div>
</main>

CSS:

main {
    position: relative;
    width: 400px;
    height: 400px;
}

.skin_orange {
    outline: thin dotted red;
    background: orange;
}

.bigBox {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.skin_blue {
    background-color: blue;
}

Демонстрация кода JSFiddle

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* (x, y)  => position */
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */    
}

.vertical {
  position: absolute;
  top: 50%;
  //left: 0;
  transform: translate(0, -50%); /* (x, y) => position */
}

.horizontal {
  position: absolute;
  //top: 0;
  left: 50%;
  transform: translate(-50%, 0); /* (x, y)  => position */
}

div {
  padding: 1em;
  background-color: grey; 
  color: white;
}  

<body>
  <div class = "vertical">Vertically left</div>
  <div class = "horizontal">Horizontal top</div>
  <div class = "center">Vertically Horizontal</div>  
</body>

Связанный: Центрировать изображение

Не отвечаю на совместимость браузера, но также хочу упомянуть новую сетку и не очень новую функцию Flexbox.

Сетка

От: Mozilla - Grid Documentation - Выровнять Div по вертикали

Поддержка браузера: Поддержка сетевого браузера

CSS:

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

HTML:

<div class = "wrapper">
 <div class = "item1">Item 1</div>
</div>

Flexbox

Поддержка браузера: Поддержка браузера Flexbox

CSS:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;

Думаю, надежное решение для всех браузеров без использования flexbox - "align-items: center;" представляет собой комбинацию display: table и vertical-align: middle ;.

CSS

.vertically-center
{
    display: table;

    width: 100%;  /* optional */
    height: 100%; /* optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class = "vertically-center">
    <div>
        <div style = "border: 1px solid black;">some text</div>
    </div>
</div>

‣Демонстрация: https://jsfiddle.net/6m640rpp/

Самое простое решение - ниже:

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
  border:1px solid #000;
}
.inner-div{
  margin: auto;
  text-align:center;
  border:1px solid red;
}

<div class = "outer-div">
  <div class = "inner-div">
    Hey there!
  </div>
</div>

CSS-сетка

body, html { margin: 0; }

body {
  display: grid;
  min-height: 100vh;
  align-items: center;
}

<div>Div to be aligned vertically</div>

Недавно я обнаружил один трюк: вам нужно использовать top 50%, а затем сделать translateY(-50%).

.outer-div {
  position: relative;
  height: 150px;
  width: 150px;
  background-color: red;
}

.centered-div {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: white;
}

<div class='outer-div'>
  <div class='centered-div'>
    Test text
  </div>
</div>

Для новичков попробуйте

display: flex;
align-items: center;
justify-content: center;

Использование свойства flex CSS.

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}

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

или по с использованием display: flex; и margin: auto;

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
    margin:auto;
}

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

показать текстовый центр

.parent {
    width: 400px;
    height: 200px;
    background: yellow;
    display: flex;
    align-items: center;
    justify-content:center;
}

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

Использование высоты и ширины в процентах (%).

.parent {
    position: absolute;
    height:100%;
    width:100%;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}

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

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

Итак, если кто-то уже использует бутстрап, это можно сделать, как показано ниже:

<div style = "min-height: 100vh;" class = "align-items-center row">
    <div class = "col" style = "margin: auto; max-width: 750px;"> //optional style to center horizontally as well

    //content goes here

    </div>
</div>

.center{
    display: grid;
    place-items: center;
}