Лучший способ центрировать
на странице по вертикали и горизонтали? [Дубликат]

Лучший способ центрировать <div>элемент на странице как вертикально, так и горизонтально?

Я знаю, что это margin-left: auto; margin-right: auto;будет центр по горизонтали, но как лучше сделать это по вертикали?

10.12.2008 17:11:33
Вот простой, чистый и стабильный способ центрировать div в контейнере, используя только CSS. stackoverflow.com/a/31977476/3597276
Michael_B 13.08.2015 00:19:16
Проверьте какой-нибудь новейший метод с использованием CSS Flex, Auto Margin Auto, 2D transform freakyjolly.com/…
Code Spy 12.02.2019 15:21:03
30 ОТВЕТОВ

Вот скрипт, который я написал некоторое время назад ( он написан с использованием библиотеки 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();
};
13
25.12.2008 10:13:03
К сожалению, OP не попросил решения JavaScript / jQuery.
Blazemonger 1.07.2014 13:31:52
Не лучше ли использовать externalHeight (true) и outerWidth (true) вместо height () и width (), поскольку «external» учитывает все возможные поля и отступы
Maria 6.09.2014 16:42:55
Очень удобно, когда вы заранее не знаете высоту / ширину div. : o)
Miros 6.01.2015 12:44:27

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

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

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

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

1
24.08.2012 14:03:22
Нет, это не так - он не центрирует элемент по горизонтали. Это половина решения проблемы.
robjez 16.01.2015 16:16:15

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

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

718
27.02.2019 05:50:29
Это круто. Я так долго думал, как это сделать. Я пробовал это с top: 0; и слева: 0 ;, но кажется, что сложение bottom: 0; и справа: 0; сделать разницу. Спасибо.
user981178 11.01.2013 03:45:57
Это решение работает, только если ваш элемент имеет фиксированную высоту . Смотрите ответ Томбула о двух решениях, которые не изменяют естественную высоту элемента.
Stuart P. Bentley 8.10.2013 21:50:43
Не работает с динамическим контентом
user2889419 6.09.2014 23:04:27
@FlashТак вы предлагаете таблицы для не табличных данных?
Vladimir Starkov 10.01.2015 03:17:00
Отлично! Я даже не знал bottom:и right:существовал в css ...
Louis van Tonder 14.06.2017 10:29:17

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

23
22.06.2016 16:28:07

Хотя это и не сработало, когда ОП задал этот вопрос, я думаю, что, по крайней мере, для современных браузеров лучшим решением будет использование 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 или решение с фиксированной шириной / высотой, показанное в других ответах.

133
10.06.2015 14:10:47
Все браузеры с 2012–2013 и выше поддерживают flex box. С сегодняшней точки зрения это должно быть достаточно безопасно, чтобы использовать его для новых приложений в большинстве случаев. Единственная ситуация, которую я могу придумать, где предпочтение отдается более старой модели, - это бизнес-клиенты, которые полагаются на устаревшую инфраструктуру и не могут выполнить обновление.
Rafael Bugajewski 23.08.2015 15:56:22

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

3
15.02.2018 13:50:06
ОП попросил решение CSS.
Blazemonger 1.07.2014 13:33:52

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

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

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

0
16.10.2013 14:58:45
Разве не должны быть поля в процентах и ​​то и 25%другое? Извините, но это решение, похоже, не работает (пока),-1
Flash Thunder 9.01.2015 21:28:26
div {
    border-style: solid;
    position: fixed;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
}

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

6
22.07.2014 11:45:32

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

Проверьте это демо .

8
24.07.2014 13:48:05
Мне это нравится, но использование реальной таблицы кажется «чище» и более обоснованным - генерирует, хотя, немного больше кода.
Flash Thunder 9.01.2015 21:27:09

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

6
22.09.2014 16:06:54
Большинство браузеров не полностью поддерживают версии unitl novaday, поэтому это решение (по крайней мере, на мой взгляд) совершенно бесполезно, извините.
Flash Thunder 9.01.2015 21:32:55
Хм ... Я на самом деле не очень понимаю, что ты говоришь. Поскольку браузеры «не» полностью поддерживали, это было (не полностью) бесполезное imo. В настоящее время браузеры (все основные из них и IE9 +) действительно полностью поддерживают его, это жизнеспособное решение прямо сейчас, не так ли? Также оформить заказ CanIUse .
giorgio 12.01.2015 08:48:24
Это элегантное решение, которое работает с содержимым любого размера, даже если размеры элемента DIV динамически изменяются (например, если вы используете jQuery для изменения содержимого, а высота DIV должна быть перенастроена). ОДНАКО, есть некоторые ошибки в некоторых средах, где использование преобразования приводит к тому, что текст выглядит размытым. Пожалуйста, будьте осторожны при использовании этого решения.
baohouse 27.01.2015 17:55:16
Спасибо @BaoNgo, ценное дополнение. Возможно, вы знаете, в какой среде (браузер? ОС? Устройство?) Возникает эта проблема? Я изменю ответ соответственно!
giorgio 28.01.2015 12:43:35

Отсюда взят еще один метод (пуленепробиваемый), использующий правило «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;
}
5
9.10.2014 15:44:29
Я знаю, что это тот же комментарий, что и ниже, но это простой повторяющийся ответ, так что ... мне нравится, но использование реальной таблицы кажется "чище" и более достоверным - генерирует, хотя и немного больше кода.
Flash Thunder 9.01.2015 21:30:52
@FlashThunder - обновите свои знания (я получил второй ответ с новой техникой, использующей преобразования внизу) и в конце концов перестану использовать таблицы для разметки;)
robjez 16.01.2015 16:05:56

Альтернативный ответ будет следующим .

<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;
}
4
11.12.2014 14:16:49
Решение только для IE9 + ... не так уж хорошо ...+0
Flash Thunder 9.01.2015 21:24:32
@FlashThunder "Решение только для IE9 + ... не так уж хорошо ..." - только если вы настаиваете на поддержке менее 1% явно устаревших - и, по большей части, явно невежественных - пользователей. Люди, которые так долго отказываются от обновления, уже привыкли к бесконечно испорченному веб-опыту.
John Weisz 17.10.2016 13:23:31

Простое решение с использованием 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 с префиксом).

23
23.05.2018 18:48:29
Whoah ... IE11+! Нет, спасибо!
Flash Thunder 9.01.2015 21:17:34
Я бы предложил использовать авто-префикс при наличии многих -webkit- в css :)
Radex 25.10.2016 19:54:25

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

Разметка:

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

94
23.06.2019 10:56:16
Да, я часто использовал этот метод ... но проблема возникает, если элемент намного выше, чем высота экрана (где heightнеизвестно) ... верхняя часть центрированного элемента будет обрезана. Даже если элемент помещен в родительский элемент, где overflowустановлено значение autoили scroll. Та же проблема с использованием flex. К сожалению, как последнее средство я использую, tableчтобы преодолеть эту проблему. Только когда центральный элемент будет намного, намного выше (динамически заполненный).
nelek 27.10.2015 06:59:21
Я должен был установить положение относительно, вероятно, потому что мой div плавает правильно.
Souradeep Nanda 28.02.2016 03:22:34
Nelek - если родительский элемент имеет фиксированную ширину и высоту, вы можете добавить к изображению max-width: 100% и max-height: 100% и предотвратить расширение родительского
jan199674 9.01.2017 00:16:22

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

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

введите описание изображения здесь

5
24.03.2015 20:19:50
Я думаю, это работает только тогда, когда это единственное. Добавьте больше div и другого контента, и это больше не работает.
ADTC 25.08.2015 16:17:45

Если вы смотрите на новые браузеры (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 (в вашем случае, окна).

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

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

18
26.07.2015 17:45:09

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

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);
2
4.08.2015 13:42:14

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

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

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

15
26.10.2016 08:47:30
Это работает только в том случае, если страница имеет контейнерный элемент div и намного сложнее translate.
MDTech.us_MAN 25.10.2016 17:37:24
@ MDTech.us_MAN: Это правда, что вам нужно больше разметки HTML, этот подход работает даже в довольно старых браузерах! Даже браузеры префиксы нравится -webkit, -msили -moz, transform: translate(-50%, -50%);не имеют почти такую же поддержку браузера! → Я добавил эту информацию внизу своего ответа
John Slegers 26.10.2016 08:48:06
Я знаю, но его 2017 сейчас и там действительно не должно вызывать особого беспокойства ... IE9 был выпущен еще в 2011 году. Caniuse.com/#search=translate говорит, что 95% Интернета должны поддерживать transform.
MDTech.us_MAN 30.05.2017 00:29:58

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

Однако обратите внимание, что этот метод заставляет этот 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>

68
25.03.2018 03:36:07
Это имеет раздражающие побочные эффекты, когда поле, которое вы хотите центрировать, имеет ширину или высоту больше половины области просмотра.
Noldorin 24.04.2019 21:29:43

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

3
16.06.2016 11:59:42
Слишком сложно. использовать translateпросто проще. Нет причин использовать дополнительные calcs и vw/ vh.
MDTech.us_MAN 25.10.2016 17:35:41
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% ширины и высоты.

14
11.11.2016 18:55:21
Хотя этот код может помочь решить проблему, предоставление дополнительного контекста относительно того, почему и / или как он отвечает на вопрос, значительно улучшит его долгосрочную ценность. Пожалуйста, отредактируйте свой ответ, чтобы добавить пояснения.
Toby Speight 25.07.2016 16:06:09
Но если мы также добавим width: 100% , то ширина этого div также сохранится.
Akshay Pratap Singh 4.09.2016 11:03:05
Я сталкиваюсь с проблемой размытия при использовании этой техники на некоторых экранах. есть ли решение для этого?
kapil 22.12.2016 04:41:17

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

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

11
28.07.2017 11:43:45

Решение

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

.parent { display: flex; }
.child { margin: auto }
5
14.08.2017 23:28:35
В какой версии CSS был добавлен тип отображения 'flex'?
Omnifarious 14.08.2017 23:57:27

Использование display:gridon parent и установка 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>

3
17.08.2017 08:39:48

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 в теле документа

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

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

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

3
23.09.2017 02:17:30

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

div {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  width: 100px;
  height: 100px;
}
1
6.10.2017 08:44:32
Это почти то же самое, что и голос за пять лет назад. Основное отличие этого ответа не имеет объяснения.
Olaf Dietsche 6.10.2017 09:32:21

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>

5
3.02.2018 20:13:41
это совсем не по центру
JFFIGK 20.10.2018 23:28:37

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

4
26.02.2018 04:00:13
В любое время, когда вы хотите изменить высоту, вы должны пересчитать запас, что не очень удобно. Также это не будет работать для элементов без фиксированного размера и привязано к высоте области просмотра.
1valdis 25.02.2018 16:10:08

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

5
26.04.2018 04:58:51

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

#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, вы можете посетить W3Schools , MDN или CSS-Tricks для получения дополнительной информации.

10
10.09.2018 23:25:42