Ответ 1

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

Моя демонстрация на 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>

Ответ 2

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

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

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

.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 или решение с фиксированной шириной/высотой, указанное в других ответах.

Ответ 3

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

Разметка:

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

Ответ 4

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

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

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

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

Подводя итог, этот метод поддерживается во всех версиях 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>

Ответ 5

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

Ответ 6

Простое решение с использованием 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 занимает весь экран и имеет дисплей: flex, установленный для каждого браузера. Второй div (центрированный div) использует преимущества дисплея: flex div, где margin: auto работает великолепно.

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

Ответ 7

Если вы просматриваете новые браузеры (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 как relative, а затем этот CSS начнет работать для вашего div.

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

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

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

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

Ответ 8

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

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

• должен иметь 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>

Ответ 9

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

Пояснение:

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

Ответ 10

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

Ответ 11

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

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

Ответ 12

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

DEMO:

Просмотрите демо.

Ответ 13

Используя Flex-box по моему мнению:

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

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

Ответ 14

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

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

Ответ 15

На самом деле существует решение с использованием 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, поскольку он умер вместе с победой xp этой осенью.) Слава богу.

JS Fiddle Demo

Ответ 16

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

Ответ 17

Я смотрел файл с изображением 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>

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

Ответ 18

Решение

Используя только две строки CSS, используя магическую мощность Flexbox

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

Ответ 19

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>

Ответ 20

Альтернативным ответом будет this.

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

Ответ 21

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

Ответ 22

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

Ответ 23

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

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

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

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

Ответ 24

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

Ответ 25

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

Ответ 26

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

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

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>

Ответ 27

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>

Ответ 28

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

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

Ответ 29

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

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

Ответ 30

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

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

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