Вот сценарий, который я написал некоторое время назад (он написан с использованием библиотеки 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();
};

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

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

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

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

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

Мой демо на 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>

Я думаю, что есть два способа выровнять центр 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

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

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

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

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

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

Использование дисплей: гибкий в соответствии с css-трюки и MDN выглядит следующим образом:

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

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

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

Если вы, ребята, используете 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/

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

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

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

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

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

Я знаю, что опаздываю на вечеринку, но вот способ центрировать 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>

ДЕМО:

Обратите внимание на этот демонстрация.

На самом деле существует решение, использующее 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

Еще один метод (пуленепробиваемый) взят из здесь с использованием правила 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;
}

Альтернативный ответ - это.

<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;
}

Простое решение с использованием 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, где margin: auto работает блестяще.

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

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

Разметка:

<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, не так ли?

Я смотрел файл представления 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>

Результат выглядит так:

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

тогда вы можете использовать свойство transform для выравнивания 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 располагается в правой нижней четверти страницы, а его верхний левый конец закрепляется в центре страницы. Это связано с тем, что свойства left / top (если указаны в%) рассчитываются на основе высоты внешнего div (в вашем случае окна).

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

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

Поддерживает ли это браузер, использование translate - это мощное средство.

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);

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

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

• должен иметь 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 для позиционирования.

Я бы использовал 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>

Если вам известен размер вашего 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>

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% ширины и высоты.

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

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

Решение

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

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

Использование 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; позиционируется относительно ближайшего позиционированного предка (вместо расположен относительно в области просмотра (тег тела), как фиксированный).

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

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

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

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

2018 способ использования CSS Grid:

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

Проверьте поддержку браузера, Могу ли я использовать предполагает, что он работает в 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>

Я удивлен, что об этом еще не упоминалось, но самый простой способ сделать это - установить высоту, поля (и ширину, если хотите) с использованием размеров области просмотра.
Как вы, возможно, знаете, общая высота области просмотра = 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>

Хоть я и опоздал, но это очень легко и просто. Центр страницы всегда оставляет 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>

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

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

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

Вы видите, что есть только три свойства CSS, которые вы должны использовать для центрирования дочернего элемента по вертикали и горизонтали. display: center; Сделайте основную часть, просто активировав дисплей 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, вы можете посетить W3Школы, MDN или CSS-хитрости для получения дополнительной информации.