Самый лучший и гибкий способ

Моя демонстрация на dabblet.com

Главный трюк в этой демонстрации заключается в том, что в обычном потоке элементы идут сверху вниз, поэтому margin-top: auto устанавливается равным нулю. Однако абсолютно позиционированный элемент действует так же для распределения свободного пространства и аналогичным образом может центрироваться по вертикали в указанных top и bottom (не работает в IE7).

Этот трюк будет работать с любыми размерами div.

div {
	width: 100px;
	height: 100px;
	background-color: red;
	
	position: absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
  	
	margin: auto;
}

<div></div>

Несмотря на то, что это не сработало, когда ОП задал этот вопрос, я думаю, по крайней мере, для современных браузеров лучшим решением является использование display: flex или псевдоклассы.

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

Примером псевдоклассов может быть:

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

.centerPseudo::before{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
    width:0px;
}

Использование display: flex согласно css-tricks и MDN следует:

.centerFlex {
  align-items: center;
  display: flex;
  justify-content: center;
}

Существуют и другие атрибуты, доступные для flex, которые объясняются в вышеупомянутых ссылках с дополнительными примерами.

Если вам нужно поддерживать старые браузеры, которые не поддерживают css3, вам, вероятно, следует использовать javascript или решение с фиксированной шириной/высотой, показанное в других ответах.

Простота этого метода ошеломляет:
(Хотя этот метод имеет свои последствия, но если вам нужно только центрировать элемент, независимо от потока остального контента, это нормально. Используйте с осторожностью)

Разметка:

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan tellus purus, et mollis nulla consectetur ac. Quisque id elit at diam convallis venenatis eget sed justo. Nunc egestas enim mauris, sit amet tempor risus ultricies in. Sed dignissim magna erat, vel laoreet tortor bibendum vitae. Ut porttitor tincidunt est imperdiet vestibulum. Vivamus id nibh tellus. Integer massa orci, gravida non imperdiet sed, consectetur ac quam. Nunc dignissim felis id tortor tincidunt, a eleifend nulla molestie. Phasellus eleifend leo purus, vel facilisis massa dignissim vitae. Pellentesque libero sapien, tincidunt ut lorem non, porta accumsan risus. Morbi tempus pharetra ex, vel luctus turpis tempus eu. Integer vitae sagittis massa, id gravida erat. Maecenas sed purus et magna tincidunt faucibus nec eget erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec mollis sem.</div>

И CSS:

div {
  color: white;
  background: red;
  padding: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}   

Это также отцентрирует элемент по горизонтали и вертикали. Никаких отрицательных полей, только сила преобразований. Также мы должны уже забыть о IE8, не так ли?

Я бы использовал translate:

Сначала поместите верхний левый угол div в центр страницы (используя position: fixed; top: 50%; left: 50%). Затем translate перемещает его вверх на 50% высоты div, чтобы отцентрировать его по вертикали на странице. Наконец, translate также перемещает div вправо на 50% от его ширины, чтобы центрировать его по горизонтали.

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

translate в некоторых сценариях лучше, чем translate3d, поскольку поддерживается большим количеством браузеров. https://caniuse.com/#feat=transforms2d

Подводя итог, этот метод поддерживается во всех версиях Chrome, Firefox 3.5+, Opera 11.5+, всех версиях Safari, IE 9+ и Edge.

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  
  font-size: 20px;
  background-color: cyan;
  border: darkgreen 5px solid;
  padding: 5px;
  z-index: 100;
}

table {
    position: absolute;
    top: 0;
    left: 0;
}

td {
    position: relative;
    top: 0;
    left: 0;
}

<table>
<tr>
    <td>
        <div class="centered">This div<br />is centered</div>
        <p>
            Lorem ipsum dolor sit amet, nam sint laoreet at, his ne sumo causae, simul decore deterruisset ne mel. Exerci atomorum est ut. At choro vituperatoribus usu. Dico epicurei persequeris quo ex, ea ius zril phaedrum eloquentiam, duo in aperiam admodum fuisset. No quidam consequuntur usu, in amet hinc simul eos. Ex soleat meliore percipitur mea, nihil omittam salutandi ut eos. Mea et impedit facilisi pertinax, ea viris graeci fierent pri, te sonet intellegebat his. Vis denique albucius instructior ad, ex eum iudicabit elaboraret. Sit ea intellegam liberavisse. Nusquam quaestio maiestatis ut qui, eam decore altera te. Unum cibo aliquip ut qui, te mea doming prompta. Ex rebum interesset nam, te nam zril suscipit, qui suavitate explicari appellantur te. Usu brute corpora mandamus eu. Dicit soluta his eu. In sint consequat sed, quo ea tota petentium. Adhuc prompta splendide mel ad, soluta delenit nec cu.
        </p>
    </td>
    <td>
        <p>
            Lorem ipsum dolor sit amet, dico choro recteque te cum, ex omnesque consectetuer sed, alii esse utinam et has. An qualisque democritum usu. Ea has habeo labores, laoreet intellegat te mea. Eius equidem inermis vel ne. Ne eum sonet labitur, nec id natum munere. Primis graecis est cu, quis dictas eu mea, eu quem offendit forensibus nec. Id animal mandamus his, vis in sonet tempor luptatum. Ne civibus oporteat comprehensam vix, per facete discere atomorum eu. Mucius probatus volutpat sit an, sumo nominavi democritum eam ut. Ea sit choro graece debitis, per ex verear voluptua epicurei. Id eum wisi dicat, ea sit velit doming cotidieque, eu sea amet delenit. Populo tacimates dissentiunt has cu. Has wisi hendrerit at, et quo doming putent docendi. Ea nibh vide omnium usu.
        </p>
    </td>
</tr>
</table>

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

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

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);

  font-size: 20px;
  background-color: cyan;
  border: darkgreen 5px solid;
  padding: 5px;
  z-index: 100;
}

table {
    position: absolute;
    top: 0;
    left: 0;
}

td {
    position: relative;
    top: 0;
    left: 0;
}

<table>
<tr>
    <td>
        <div class="centered">This div<br />is centered</div>
        <p>
            Lorem ipsum dolor sit amet, nam sint laoreet at, his ne sumo causae, simul decore deterruisset ne mel. Exerci atomorum est ut. At choro vituperatoribus usu. Dico epicurei persequeris quo ex, ea ius zril phaedrum eloquentiam, duo in aperiam admodum fuisset. No quidam consequuntur usu, in amet hinc simul eos. Ex soleat meliore percipitur mea, nihil omittam salutandi ut eos. Mea et impedit facilisi pertinax, ea viris graeci fierent pri, te sonet intellegebat his. Vis denique albucius instructior ad, ex eum iudicabit elaboraret. Sit ea intellegam liberavisse. Nusquam quaestio maiestatis ut qui, eam decore altera te. Unum cibo aliquip ut qui, te mea doming prompta. Ex rebum interesset nam, te nam zril suscipit, qui suavitate explicari appellantur te. Usu brute corpora mandamus eu. Dicit soluta his eu. In sint consequat sed, quo ea tota petentium. Adhuc prompta splendide mel ad, soluta delenit nec cu.
        </p>
    </td>
    <td>
        <p>
            Lorem ipsum dolor sit amet, dico choro recteque te cum, ex omnesque consectetuer sed, alii esse utinam et has. An qualisque democritum usu. Ea has habeo labores, laoreet intellegat te mea. Eius equidem inermis vel ne. Ne eum sonet labitur, nec id natum munere. Primis graecis est cu, quis dictas eu mea, eu quem offendit forensibus nec. Id animal mandamus his, vis in sonet tempor luptatum. Ne civibus oporteat comprehensam vix, per facete discere atomorum eu. Mucius probatus volutpat sit an, sumo nominavi democritum eam ut. Ea sit choro graece debitis, per ex verear voluptua epicurei. Id eum wisi dicat, ea sit velit doming cotidieque, eu sea amet delenit. Populo tacimates dissentiunt has cu. Has wisi hendrerit at, et quo doming putent docendi. Ea nibh vide omnium usu.
        </p>
    </td>
</tr>
</table>

Простое решение с использованием Flex Display

 <div style = 'display:flex; position:absolute; top:0; bottom:0; right:0; left:0; '>
      <div id = 'div_you_want_centered' style = 'margin:auto;'> 
           This will be Centered 
      </div>
 </div>

Проверьте http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Первый div занимает весь экран и имеет display:flex для каждого браузера. Второй div (центрированный div) использует преимущества display:flex div, где margin:auto работает блестяще.

Обратите внимание на совместимость с IE11+. (IE10 с префиксом).

Я думаю, что есть два способа выровнять центр div через CSS.

.middleDiv {
    position : absolute;    
    width    : 200px;
    height   : 200px;
    left     : 50%;
    top      : 50%;
    margin-left : -100px; /* half of the width  */
    margin-top  : -100px; /* half of the height */
}

Это самый простой и лучший способ. для демонстрации перейдите по ссылке ниже:

http://w3webpro.blogspot.in/2013/07/how-to-make-div-horizontally-and.html

Если вы смотрите на новые браузеры (IE10+),

затем вы можете использовать свойство преобразования, чтобы выровнять div по центру.

<div class="center-block">this is any div</div>

И css для этого должен быть:

.center-block {
  top:50%;
  left: 50%;
  transform: translate3d(-50%,-50%, 0);
  position: absolute;
}

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

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

Как это работает:

Когда вы указываете left и top на 50%, элемент div помещается в нижнюю правую четверть страницы, а его верхний левый конец закрепляется в центре страницы. Это связано с тем, что левые/верхние свойства (если они указаны в %) рассчитываются на основе высоты внешнего div (в вашем случае окна).

Но преобразование использует высоту/ширину элемента для определения перевода, поэтому ваш элемент div будет перемещаться влево (50% ширины) и вверх (50% его высоты), поскольку они даны в негативах, тем самым выравнивая его по центру страницы.

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

position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

Объяснение:

Дайте ему абсолютное позиционирование (у родителя должно быть относительное позиционирование). Затем левый верхний угол перемещается в центр. Поскольку вы еще не знаете ширину/высоту, вы используете преобразование css для перевода положения относительно середины. translate(-50%, -50%) уменьшает положение x и y верхнего левого угла на 50% ширины и высоты.

Использование Flex-box, на мой взгляд:

#parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="parent">
  <div id="child">Hello World!</div>
</div>

Вы видите, что есть только три свойства CSS, которые вы должны использовать для центрирования дочернего элемента по вертикали и горизонтали. display: flex; Выполните основную часть, просто активировав отображение Flex-box, justify-content: center; отцентрируйте дочерний элемент по вертикали и align-items: center; отцентрируйте его по горизонтали. Чтобы увидеть наилучший результат, я просто добавляю несколько дополнительных стилей:

#parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  width: 500px;
  background: yellow;
}

#child {
  width: 100px;
  height: 100px;
  background: silver;
}

<div id="parent">
  <div id="child">Hello World!</div>
</div>

Если вы хотите узнать больше о Flex-box, вы можете посетить W3Schools, MDN или CSS-Tricks для получения дополнительной информации.

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

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

• должно быть display: table;

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

• должно быть display: table-cell;
• должно быть vertical-align: middle;
• должно быть text-align: center;

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

• должно быть display: inline-block;
• следует перенастроить горизонтальное выравнивание текста, например. 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">
        You can put anything here!
     </div>
   </div>
</div>

См. также эту скрипту!

РЕДАКТИРОВАТЬ

Да, я знаю, что вы можете добиться более или менее такой же гибкости с помощью transform: translate(-50%, -50%); или transform: translate3d(-50%,-50%, 0);, метод, который я предлагаю, гораздо лучше поддерживается браузерами. Даже с префиксами браузеров, такими как -webkit, -ms или -moz, transform не предлагает такой же поддержки браузера.

Поэтому, если вам нужны старые браузеры (например, IE9 и ниже), вам не следует использовать transform для позиционирования.

Вот скрипт, который я написал некоторое время назад (он написан с использованием библиотеки jQuery):

var centerIt = function (el /* (jQuery element) Element to center */) {
    if (!el) {
        return;
    }
    var moveIt = function () {
        var winWidth = $(window).width();
        var winHeight = $(window).height();
        el.css("position","absolute").css("left", ((winWidth / 2) - (el.width() / 2)) + "px").css("top", ((winHeight / 2) - (el.height() / 2)) + "px");
    }; 
    $(window).resize(moveIt);
    moveIt();
};

Это лучший код для центрирования бота div по горизонтали и вертикали.

div
{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

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

стиль:

<style>

    .table {
      display: table;
      height: 100%;
      margin: 0 auto;
    }
    .table-cell {
      display: table-cell;
      vertical-align: middle;      
    }
    .centered {
      background-color: red;
    }
  </style>

HTML:

<div class="table">
    <div class="table-cell"><div class="centered">centered</div></div>
</div>

ДЕМО:

Посмотрите эту демонстрацию.

Хоть я и опоздал, но это очень легко и просто. Центр страницы всегда слева 50%, а вверху 50%. Итак, минус ширина и высота div 50% и установить левое поле и правое поле. Надеюсь, это работает везде -

body{
  background: #EEE;
}
.center-div{
  position: absolute;
  width: 200px;
  height: 60px;
  left: 50%;  
  margin-left: -100px;
  top: 50%;
  margin-top: -30px;
  background: #CCC;
  color: #000;
  text-align: center;
}

<div class="center-div">
  <h3>This is center div</h3>
</div>

div {
    border-style: solid;
    position: fixed;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
}

Отрегулируйте слева и сверху по ширине и высоте, то есть (100% - 80%) / 2 = 10%

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

<div class="parent">
    <div class="center-me">
        Text, images, whatever suits you.
    </div>
</div>

.parent { 
    /* height can be whatever you want, also auto if you want a child 
       div to be responsible for the sizing */ 
    height: 200px;
}

.center-me { 
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* prefixes needed for cross-browser support */
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

Поддерживается всеми основными браузерами, а также IE 9 и более поздними версиями (не беспокойтесь об IE 8, так как он умер этой осенью вместе с win xp. Слава богу).

Демо JS Fiddle

Способ 2018 года с использованием CSS Grid:

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

Проверьте поддержку браузера, Caniuse предполагает, что он работает с Chrome 57, FF 52, Opera 44, Safari. 10.1, Edge 16. Сам не проверял.

См. фрагмент ниже:

.parent{
    display: grid;
    place-items: center center;
    /*place-items is a shorthand for align-items and justify-items*/
    
    height: 200px;
    border: 1px solid black;
    background: gainsboro;
}

.child{
    background: white;
}

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

Еще один метод (пуленепробиваемый), взятый из здесь с использованием правила display:table:

Разметка

<div class="container">
  <div class="outer">
    <div class="inner">
      <div class="centered">
        ...
      </div>
    </div>
  </div>
</div>

CSS:

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

  width: 50%;
  padding: 1em;
  background: orange;
  color: white;
}

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

<html>
<head>
    <title>Laravel</title>

    <!--<link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>-->

    <style>
        .container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            display: table;

        }

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


    </style>
</head>
<body>
    <div class="container">
            <div class="inside">This text is centered</div>
    </div>
</body>

Result looks so:

Решение

Используя всего две строки CSS, используя волшебную силу Flexbox

.parent { display: flex; }
.child { margin: auto }

Альтернативным ответом может быть это.

<div id="container"> 
    <div id="centered"> </div>
</div>

и CSS:

#container {
    height: 400px;
    width: 400px;
    background-color: lightblue;
    text-align: center;
}

#container:before {
    height: 100%;
    content: '';
    display: inline-block;
    vertical-align: middle;
}

#centered {
    width: 100px;
    height: 100px;
    background-color: blue;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
}

Я удивлен, что об этом еще не упоминалось, но самый простой способ сделать это - установить высоту, поля (и ширину, если хотите) с использованием размеров окна просмотра.
Как вы, возможно, знаете, общая высота области просмотра = 100vh.
Допустим, вы хотите, чтобы height вашего контейнера занимало 60% (60vh) экрана, вы можете разделить оставшуюся часть (40vh) поровну между верхними и нижнее поле, чтобы элемент автоматически выравнивался по центру.
Установка margin-left и margin-right на auto обеспечит центрирование контейнера по горизонтали.

.container {
         width: 60vw; /*optional*/
         height: 60vh;
         margin: 20vh auto;
         background: #333;
 }

<div class="container">
</div>

Если вы знаете определенный размер для div, вы можете использовать calc.

Живой пример: https://jsfiddle.net/o8416eq3/

Примечания: Это работает, только если вы жестко закодировали ширину и высоту вашего ``div` в CSS.

#target {
  position:fixed;
  top: calc(50vh - 100px/2);
  left: calc(50vw - 200px/2);
  width:200px;
  height:100px;
  background-color:red;
}

<div id='target'></div>

Использование display:grid для родительского элемента и установка margin:auto для центрального элемента сделают свое дело:

См. ниже фрагмент:

html,body {
  width :100%;
  height:100%;
  margin:0;
  padding:0;
}

.container {
  display:grid;
  height:90%;
  background-color:blue;
}

.content {
  margin:auto;
  color:white;
}

<div class="container">
  <div class="content"> cented div  here</div>
</div>

div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	    
}

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

позиция: абсолютный элемент div в основном документе

Элемент с позицией: absolute; позиционируется относительно ближайшего позиционированного предка (вместо позиционируется относительно области просмотра (тега body), например, fixed).

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

источник: позиция CSS

Если вы, ребята, используете JQuery, вы можете сделать это, используя .position();

<div class="positionthis"></div>

CSS

.positionthis {
    width:100px;
    height:100px;
    position: absolute;
    background:blue;
}

Javascript (JQuery)

$(document).ready(function () {
    $('.positionthis').position({
        of: $(document),
        my: 'center center',
        at: 'center center',
        collision: 'flip flip'
    });
});

JSFiddle: http://jsfiddle.net/vx9gV/

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

position: absolute;
background-color: red;

width: 70%;     
height: 30%; 

/* The translate % is relative to the size of the div and not the container*/ 
/* 21.42% = ( (100%-70%/2) / 0.7 ) */
/* 116.666% = ( (100%-30%/2) / 0.3 ) */
transform: translate3d( 21.42%, 116.666%, 0);

Это решение сработало для меня

    .middleDiv{
        position : absolute;
        height : 90%;
        bottom: 5%;
    }

(или высота: 70% / низ: 15%

высота: 40% / низ: 30%...)

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

div {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  width: 100px;
  height: 100px;
}

Извините за поздний ответ лучший способ

  div {
      position: fixed;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -100px;
    }

margin-top и margin-left должны соответствовать размеру вашего блока div.