как горизонтально центрировать <div>?

<p>как я могу горизонтально центрировать <code><div></code> внутри другого <code><div></code>, используя css? </p><pre class="lang-html prettyprint-override"><code><div id="outer"> <div id="inner">foo foo</div> </div> </code></pre>

<p>вы можете применить этот css к внутреннему <code><div></code>:</p><pre class="lang-css prettyprint-override"><code>#inner { width: 50%; margin: 0 auto; } </code></pre><p>конечно, вам не нужно устанавливать <code>width</code> в <code>50%</code>. любая ширина меньше, чем содержащий <code><div></code> будет работать. <code>margin: 0 auto</code> - это то, что делает фактическое центрирование.</p><p>если вы ориентируетесь на ie8 +, может быть лучше иметь это вместо:</p><pre class="lang-css prettyprint-override"><code>#inner { display: table; margin: 0 auto; } </code></pre><p>это сделает внутренний элемент по центру по горизонтали и работает без установки определенной переменной <code>width</code>.</p><p>рабочий пример здесь:</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#inner { display: table; margin: 0 auto; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="outer" style="width:100%"> <div id="inner">foo foo</div> </div></code></pre> </div> </div> </p>

<p>если вы не хотите устанавливать фиксированную ширину внутренней <code>div</code>, вы можете сделать что-то вроде этого:</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#outer { width: 100%; text-align: center; } #inner { display: inline-block; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="outer"> <div id="inner">foo foo</div> </div></code></pre> </div> </div> </p><p>это делает внутренний <code>div</code> встроенным элементом, который может быть центрирован с помощью <code>text-align</code>.</p>

<p>лучшие подходы с <a href="http://www.w3schools.com/css/css3\_intro.asp">css 3</a> .</p><h3>модель коробки:</h3><pre class="lang-css prettyprint-override"><code>#outer{ width: 100%; /* firefox */ display: -moz-box; -moz-box-pack: center; -moz-box-align: center; /* safari and chrome */ display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; /* w3c */ display: box; box-pack: center; box-align: center; } #inner{ width: 50%; } </code></pre><p>в зависимости от удобства использования вы также можете использовать свойства <code>box-orient, box-flex, box-direction</code>.</p><p><strong>flex</strong>:</p><pre class="lang-css prettyprint-override"><code>#outer { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; } </code></pre><h3>узнайте больше о центрировании дочерних элементов</h3><ul> <li><p> <a href="http://www.w3.org/tr/css3-box/">ссылка 2</a> </p></li> <li><p> <a href="http://www.w3.org/tr/css2/box.html">ссылка 3</a> </p></li> <li><p> <a href="https://developer.mozilla.org/en-us/docs/web/css/box-align">ссылка 4</a> </p></li> </ul><p>и <strong>это объясняет, почему блочная модель является лучшим подходом</strong>:</p><ul> <li><em> <a href="https://stackoverflow.com/questions/2429819/why-is-the-w3c-box-model-considered-better">почему модель коробки w3c считается лучше?</a> </em></li> </ul>

<p>предположим, что ваш div имеет <code>200px</code>:</p><pre class="lang-css prettyprint-override"><code>.centered { position: absolute; left: 50%; margin-left: -100px; } </code></pre><p>убедитесь, что родительский элемент <a href="https://developer.mozilla.org/en-us/docs/web/css/position">позиционирован</a> т.е. относительно, фиксирован, абсолютен или прикреплен.</p><p>если вы не знаете ширину вашего div, вы можете использовать <code>transform:translatex(-50%);</code> вместо отрицательного поля.</p><p> <a href="https://jsfiddle.net/gjvfxxdj/">https://jsfiddle.net/gjvfxxdj/</a> </p>

<p>я создал этот <a href="http://codepen.io/tom-maton/pen/oqsej">пример</a> , чтобы показать, как <strong>вертикально</strong> и <strong>горизонтально</strong> <code>align</code>.</p><p>код в основном это:</p><pre><code>#outer { position: relative; } </code></pre><p>а также...</p><pre><code>#inner { margin: auto; position: absolute; left:0; right: 0; top: 0; bottom: 0; } </code></pre><p>и он останется в <code>center</code>, даже когда вы <strong>измените размер</strong> вашего экрана.</p>

<p>некоторые авторы упомянули способ центрирования css 3 с помощью <code>display:box</code>.</p><p>этот синтаксис устарел и больше не должен использоваться. [смотрите также <a href="http://css-tricks.com/old-flexbox-and-new-flexbox/">этот пост]</a> .</p><p>так что для полноты изложения здесь представлен новейший способ центрирования в css 3 с помощью <strong> <a href="http://www.w3.org/tr/css3-flexbox/">модуля гибкой компоновки блоков</a> </strong>.</p><p>так что если у вас есть простая разметка вроде:</p><pre><code><div class="box"> <div class="item1">a</div> <div class="item2">b</div> <div class="item3">c</div> </div> </code></pre><p>... и вы хотите центрировать свои элементы в рамке, вот что вам нужно на родительском элементе (.box):</p><pre class="lang-css prettyprint-override"><code>.box { display: flex; flex-wrap: wrap; /* optional. only if you want the items to wrap */ justify-content: center; /* for horizontal alignment */ align-items: center; /* for vertical alignment */ } </code></pre><p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.box { display: flex; flex-wrap: wrap; /* optional. only if you want the items to wrap */ justify-content: center; /* for horizontal alignment */ align-items: center; /* for vertical alignment */ } * { margin: 0; padding: 0; } html, body { height: 100%; } .box { height: 200px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; border: 2px solid tomato; } .box div { margin: 0 10px; width: 100px; } .item1 { height: 50px; background: pink; } .item2 { background: brown; height: 100px; } .item3 { height: 150px; background: orange; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="box"> <div class="item1">a</div> <div class="item2">b</div> <div class="item3">c</div> </div></code></pre> </div> </div> </p><p>если вам нужно поддерживать старые браузеры, которые используют старый синтаксис для flexbox <a href="http://the-echoplex.net/flexyboxes/">вот</a> хорошее место для поиска.</p>

<p>если вы не хотите устанавливать фиксированную ширину и не хотите дополнительного поля, добавьте <code>display: inline-block</code> к вашему элементу.</p><p>ты можешь использовать:</p><pre class="lang-css prettyprint-override"><code>#element { display: table; margin: 0 auto; } </code></pre>

<p> <a href="http://www.w3schools.com/cssref/css3\_pr\_box-align.asp">css3 свойство box-align</a> </p><pre class="lang-css prettyprint-override"><code>#outer { width:100%; height:100%; display:box; box-orient:horizontal; box-pack:center; box-align:center; } </code></pre>

<p>он не может быть центрирован, если вы не дадите ему ширину, иначе он займет по умолчанию все горизонтальное пространство.</p>

<p>установите <code>width</code> и установите <code>margin-left</code> и <code>margin-right</code> в <code>auto</code>. это<strong> только для горизонтальной </strong>, хотя. если вы хотите оба пути, вы должны сделать это обоими способами. не бойтесь экспериментировать; это не значит, что ты что-то сломаешь.</p>

<h2>центрирование div неизвестной высоты и ширины</h2><p>по горизонтали и вертикали. он работает с достаточно современными браузерами (firefox, safari/webkit, chrome, internet explorer 10, opera и т.д.)</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.content { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="content">this works with any content</div></code></pre> </div> </div> </p><p>повозитесь с ним дальше <a href="http://codepen.io/storypixel/pen/dbdiq">codepen</a> или на <a href="http://jsbin.com/zureq/1">jsbin</a> .</p>

<p>недавно мне пришлось центрировать «скрытый» div (то есть display: none;), в котором была табличная форма, которая должна была быть центрирована на странице. я написал следующий jquery для отображения скрытого div, а затем обновил css до автоматически сгенерированной ширины таблицы и изменил поле, чтобы отцентрировать его. (переключатель отображения активируется нажатием на ссылку, но этот код отображать не обязательно.)</p><p>примечание. я делюсь этим кодом, потому что google привел меня к этому решению для переполнения стека, и все бы сработало, за исключением того, что скрытые элементы не имеют ширины и не могут быть изменены/центрированы до тех пор, пока они не отобразятся.</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){ $('#inner').show().width($('#innertable').width()).css('margin','0 auto'); }); <pre class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="inner" style="display:none;"> <form action=""> <table id="innertable"> name:<input type="text"> email:<input type="text"> email:<input type="submit"> </table>     

я обычно делаю это, используя абсолютную позицию:#inner{ left: 0; right: 0; margin-left: auto; margin-right: auto; position: absolute; } внешний div не нуждается в дополнительных свойствах, чтобы это работало.

для firefox и chrome:<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><div style="width:100%;"> <div style="width: 50%; margin: 0px auto;">text    для internet explorer, firefox и chrome:<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><div style="width:100%; text-align:center;"> <div style="width: 50%; margin: 0px auto; text-align:left;">text    свойство text-align: является необязательным для современных браузеров, но оно необходимо в режиме причуд internet explorer для поддержки устаревших браузеров.

это мой ответ.<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override">#outerdiv { width: 500px; } #innerdiv { width: 200px; margin: 0 auto; } <pre class="snippet-code-html lang-html prettyprint-override"><div id="outerdiv"> <div id="innerdiv">inner content    

другое решение для этого без необходимости устанавливать ширину для одного из элементов - использовать атрибут css 3 transform.#outer { position: relative; } #inner { position: absolute; left: 50%; transform: translatex(-50%); } хитрость в том, что translatex(-50%) устанавливает элемент #inner на 50 процентов слева от его собственной ширины. вы можете использовать тот же трюк для вертикального выравнивания.вот <a href="http://jsfiddle.net/bfedqjz4/"><strong>fiddle</strong> , показывающий горизонтальное и вертикальное выравнивание.более подробная информация о <a href="https://developer.mozilla.org/en-us/docs/web/css/transform">mozilla developer network .

крис койер (chris coyier), который написал <a href="http://css-tricks.com/centering-in-the-unknown/">отличный пост о «центрировании в неизвестном» в своем блоге. это сводка нескольких решений. я опубликовал тот, который не опубликован в этом вопросе. у него больше поддержки браузеров, чем у flexbox-решения, и вы не используете display: table;, что может сломать другие вещи. / this parent can be any width and height / .outer { text-align: center; } / the ghost, nudged to maintain perfect centering / .outer:before { content: '.'; display: inline-block; height: 100%; vertical-align: middle; width:0; overflow:hidden; } / the element to be centered, can also be of any width and height / .inner { display: inline-block; vertical-align: middle; width: 300px; } 

я понимаю, что довольно поздно опаздываю к игре, но это очень популярный вопрос, и недавно я нашел подход, который я не видел здесь, упоминаемый здесь, поэтому я решил, что задокументирую его.#outer { position: absolute; left: 50%; } #inner { position: relative; left: -50%; } правка: оба элемента должны быть одинаковой ширины, чтобы функционировать правильно.

например, смотрите <a href="http://jsfiddle.net/ucdpk/">эту ссылку и фрагмент ниже:<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override">div#outer { height: 120px; background-color: red; } div#inner { width: 50%; height: 100%; background-color: green; margin: 0 auto; text-align: center; / for text alignment to center horizontally. / line-height: 120px; / for text alignment to center vertically. / } <pre class="snippet-code-html lang-html prettyprint-override"><div id="outer" style="width:100%;"> <div id="inner">foo foo    если у вас много детей под родителем, значит, ваш css-контент должен выглядеть следующим образом <a href="http://jsfiddle.net/ucdpk/2/">пример на скрипке .содержание html выглядит следующим образом:<div id="outer" style="width:100%;"> <div class="inner"> foo text  <div class="inner"> foo text  <div class="inner"> foo text  <div class="inner">  <div class="inner">  <div class="inner">  <div class="inner">  <div class="inner">  <div class="inner"> foo text   тогда посмотрите этот <a href="http://jsfiddle.net/ucdpk/2/">пример на скрипке .

самый простой способ:<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override">#outer { width: 100%; text-align: center; } #inner { margin: auto; width: 200px; } <pre class="snippet-code-html lang-html prettyprint-override"><div id="outer"> <div id="inner">blabla    

центрирование только по горизонталипо моему опыту, лучший способ центрировать прямоугольник по горизонтали - применить следующие свойства:контейнер: должен иметь text-align: center; контент окно: должен иметь display: inline-block; демо-версия:<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override">.container { width: 100%; height: 120px; background: #ccc; text-align: center; } .centered-content { display: inline-block; background: #fff; padding: 20px; border: 1px solid #000; } <pre class="snippet-code-html lang-html prettyprint-override"><div class="container"> <div class="centered-content"> center this!     смотрите также <a href="https://jsfiddle.net/zmw77awd/1/"><strong>this fiddle</strong> !центрирование по горизонтали и вертикалипо моему опыту, лучший способ центрировать прямоугольник <strong>both</strong> по вертикали и горизонтали - это использовать дополнительный контейнер и применять следующие свойства:внешний контейнер: должен иметь display: table; внутренний контейнер: должен иметь display: table-cell; должен иметь vertical-align: middle; должен иметь text-align: center; контент окно: должен иметь display: inline-block; демо-версия:<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override">.outer-container { display: table; width: 100%; height: 120px; background: #ccc; } .inner-container { display: table-cell; vertical-align: middle; text-align: center; } .centered-content { display: inline-block; background: #fff; padding: 20px; border: 1px solid #000; } <pre class="snippet-code-html lang-html prettyprint-override"><div class="outer-container"> <div class="inner-container"> <div class="centered-content"> center this!      смотрите также <a href="https://jsfiddle.net/zmw77awd/2/"><strong>this fiddle</strong> !

вот что вы хотите кратчайшим путем. <strong> <a href="http://jsfiddle.net/8qycn/">jsfiddle </strong>#outer { margin - top: 100 px; height: 500 px; / you can set whatever you want / border: 1 px solid# ccc; } #inner { border: 1 px solid# f00; position: relative; top: 50 % ; transform: translatey(-50 % ); } 

вы можете сделать что-то вроде этого#container { display: table; width: <width of your container>; height: <height of your container>; } #inner { width: <width of your center div>; display: table-cell; margin: 0 auto; text-align: center; vertical-align: middle; } это также выровняет #inner по вертикали. если вы не хотите, удалите свойства display и vertical-align;

<strong> если ширина содержимого неизвестна, вы можете использовать следующий метод </strong>. предположим, у нас есть эти два элемента: .outer - полная ширина .inner - ширина не задана (но можно указать максимальную ширину) предположим, что вычисленная ширина элементов составляет 1000 пикселей и 300 пикселей соответственно. действуйте следующим образом: обернуть .inner внутри .center-helper сделать .center-helper встроенным блоком; он становится того же размера, что и .inner, делая его шириной 300 пикселей. нажмите .center-helper на 50% вправо относительно своего родителя; это оставляет его слева на 500px по отношению к. наружный. нажмите .inner 50% слева от его родителя; это оставляет его слева в -150px по отношению к. вспомогательный центр, что означает, что его левый находится в 500 - 150 = 350 пикселей по отношению к. наружный. установите переполнение на .outer скрытым, чтобы предотвратить горизонтальную полосу прокрутки. демо-версия:<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override">body { font: medium sans-serif; } .outer { overflow: hidden; background-color: papayawhip; } .center-helper { display: inline-block; position: relative; left: 50%; background-color: burlywood; } .inner { display: inline-block; position: relative; left: -50%; background-color: wheat; } <pre class="snippet-code-html lang-html prettyprint-override"><div class="outer"> <div class="center-helper"> <div class="inner"> a div with no defined width lorem ipsum dolor sit amet, consectetur adipiscing elit. duis condimentum sem non turpis consectetur blandit. donec dictum risus id orci ornare tempor. proin pharetra augue a lorem elementum molestie. nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.      .outer { overflow: hidden; } .center-helper { float: left; position: relative; left: 50%; } .inner { float: left; position: relative; left: -50%; } 

выровнять текст: по центруприменяя <a href="https://developer.mozilla.org/en-us/docs/web/css/text-align?v=control"><strong>text-align: center</strong> встроенное содержимое центрируется в рамке строки. однако, поскольку внутренний div по умолчанию имеет width: 100%, вы должны установить определенную ширину или использовать один из следующих:  <a href="https://developer.mozilla.org/en-us/docs/web/css/display?v=control"><strong>display: block</strong>   <a href="https://developer.mozilla.org/en-us/docs/web/css/display?v=control"><strong>display: inline</strong>   <a href="https://developer.mozilla.org/en-us/docs/web/css/display?v=control"><strong>display: inline-block</strong>  <div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override">#inner { display: inline-block; } #outer { text-align: center; } <pre class="snippet-code-html lang-html prettyprint-override"><div id="outer"> <div id="inner">foo foo    маржа: 0 автоиспользование <a href="https://developer.mozilla.org/en/docs/web/css/margin?v=example"><strong>margin: 0 auto</strong> - это еще один вариант, более подходящий для совместимости с более старыми браузерами. он работает вместе с <a href="https://developer.mozilla.org/en-us/docs/web/css/display?v=control"><strong>display: table</strong> .<div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override">#inner { display: table; margin: 0 auto; } <pre class="snippet-code-html lang-html prettyprint-override"><div id="outer"> <div id="inner">foo foo    flexbox <a href="https://developer.mozilla.org/en-us/docs/web/css/display?v=control"><strong>display: flex</strong> ведет себя как блочный элемент и размещает его содержимое в соответствии с моделью flexbox. работает с <a href="https://developer.mozilla.org/en-us/docs/web/css/justify-content?v=control"><strong>justify-content: center</strong> .<strong>обратите внимание:</strong> flexbox совместим с большинством браузеров, но не со всеми. смотрите <a href="http://caniuse.com/#feat=flexbox">здесь для полного и актуального списка совместимости браузеров.<div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override">#inner { display: inline-block; } #outer { display: flex; justify-content: center; } <pre class="snippet-code-html lang-html prettyprint-override"><div id="outer"> <div id="inner">foo foo    преобразование <a href="https://developer.mozilla.org/en-us/docs/web/css/transform?v=control"><strong>transform: translate</strong> позволяет изменять координатное пространство модели визуального форматирования css. используя его, элементы могут быть переведены, повернуты, масштабированы и перекошены. для центрирования по горизонтали требуются <a href="https://developer.mozilla.org/en/docs/web/css/position?v=example"><strong>position: absolute</strong> и <a href="https://developer.mozilla.org/en/docs/web/css/left"><strong>left: 50%</strong> .<div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override">#inner { position: absolute; left: 50%; transform: translate(-50%, 0%); } <pre class="snippet-code-html lang-html prettyprint-override"><div id="outer"> <div id="inner">foo foo    <center> (устарело)тег <a href="https://developer.mozilla.org/en-us/docs/web/html/element/center"><strong><center></strong> является html-альтернативой <a href="https://developer.mozilla.org/en-us/docs/web/css/text-align?v=control"><strong>text-align: center</strong> . он работает в старых браузерах и большинстве новых, но не считается хорошей практикой, поскольку эта функция <a href="https://www.w3.org/tr/html5/obsolete.html">устарела и удалена из веб-стандартов.<div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override">#inner { display: inline-block; } <pre class="snippet-code-html lang-html prettyprint-override"><div id="outer"> <center> <div id="inner">foo foo </center>    

вы можете использовать display: flex для внешнего элемента div и для горизонтального центрирования вы должны добавить justify-content: center<pre class="lang-css prettyprint-override">#outer{ display: flex; justify-content: center; } или вы можете посетить <a href="https://www.w3schools.com/cssref/css3_pr_flex.asp">w3schools - css flex property для большего количества идей.

существовал один вариант, который я нашел:все говорят, чтобы использовать:margin: auto 0; но есть и другой вариант. установите это свойство для родительского div. он работает идеально в любое время:text-align: center; и смотри, ребенок иди в центр.и, наконец, css для вас:#outer{ text-align: center; display: block; / or inline-block - base on your need / } #inner { position: relative; margin: 0 auto; / it is good to be / } 

flex обеспечивает более 97% поддержки браузеров и может быть лучшим способом решения подобных проблем в несколько строк:#outer { display: flex; justify-content: center; } 

этот метод также отлично работает:div.container { display: flex; justify-content: center; / for horizontal alignment / align-items: center; / for vertical alignment / } для внутреннего  единственным условием является то, что его height и width не должны быть больше, чем у его контейнера.

попробуйте поиграть с margin: 0 auto; если вы тоже хотите центрировать текст, попробуйте использовать:text-align: center; 

если кому-то нужно решение jquery для центра, выровняйте эти div:$(window).bind("load", function() { var wwidth = $("#outer").width(); var width = $('#inner').width(); $('#inner').attr("style", "padding-left: " + wwidth / 2 + "px; margin-left: -" + width / 2 + "px;"); }); </code></pre>

<p>вы можете просто использовать<strong> flexbox </strong>вот так:</p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#outer { display: flex; justify-content: center }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="outer"> <div id="inner">foo foo</div> </div></code></pre></div> </div><p>примените autoprefixer для поддержки всех браузеров:</p><pre><code>#outer { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } </code></pre><h1>или иначе</h1><p>использовать<strong> преобразовать </strong>:</p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#inner { position: absolute; left: 50%; transform: translate(-50%) }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="outer"> <div id="inner">foo foo</div> </div></code></pre></div> </div><p>с автопрефиксатором:</p><pre><code>#inner { position: absolute; left: 50%; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%) } </code></pre>

<p><strong>css 3:</strong></p><p>вы можете использовать следующий стиль в родительском контейнере для равномерного распределения дочерних элементов по горизонтали:</p><pre><code>display: flex; justify-content: space-between; // <-- space-between or space-around </code></pre><p>хороший <a href="https://www.w3schools.com/cssref/playit.asp?filename=playcss\_justify-content&preval=space-between">demo</a> относительно различных значений для <code>justify-content</code>.</p><p> <a href="https://i.stack.imgur.com/h3tjq.png"> <img src="https://i.stack.imgur.com/h3tjq.png" alt="enter image description here"> </a> </p><p>caniuse: <a href="http://caniuse.com/#search=justify-content">совместимость браузера</a> </p><p><strong>попытайся!:</strong></p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#containerdiv { display: flex; justify-content: space-between; } #containerdiv > div { background-color: blue; width: 50px; color: white; text-align: center; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>js bin</title> </head> <body> <div id="containerdiv"> <div>88</div> <div>77</div> <div>55</div> <div>33</div> <div>40</div> <div>45</div> </div> </body> </html></code></pre> </div> </div> </p>

<p>я применил встроенный стиль для внутреннего div. используйте это. </p><pre><code><div id="outer" style="width:100%"> <div id="inner" style="display:table;margin:0 auto;">foo foo</div> </div> </code></pre>

<pre><code>#inner { width: 50%; margin: 0 auto; } </code></pre>

<p>вы можете добиться этого, используя <strong>css flexbox</strong>. вам просто нужно применить 3 свойства к родительскому элементу, чтобы все заработало.</p><pre><code>#outer { display: flex; align-content: center; justify-content: center; } </code></pre><p>посмотрите на код ниже, это поможет вам лучше понять свойства.</p><p>узнайте больше о <strong> <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">css flexbox</a> </strong></p><p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#outer { display: flex; align-items: center; justify-content: center; border: 1px solid #ddd; width: 100%; height: 200px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="outer"> <div id="inner">foo foo</div> </div></code></pre> </div> </div> </p>

<p>хорошая вещь, которую я недавно обнаружил, смешивая использование <code>line-height</code> + <code>vertical-align</code> и левого трюка <code>50%</code>, вы можете <code>center</code> блок динамического размера внутри другого блока динамического размера, как по горизонтали, так и по вертикали, используя чистый css. </p><p>обратите внимание, что вы должны использовать span (и <code>inline-block</code>), протестированные в современных браузерах + ie8 . <strong>html:</strong></p><pre><code> <h1>center dynamic box using only css test</h1> <div class="container"> <div class="center"> <div class="center-container"> <span class="dyn-box"> <div class="dyn-head">this is a head</div> <div class="dyn-body"> this is a body<br /> content<br /> content<br /> content<br /> content<br /> </div> </span> </div> </div> </div> </code></pre><p><strong>css:</strong></p><pre><code>.container { position:absolute; left:0;right:0;top:0;bottom:0; overflow:hidden; } .center { position:absolute; left:50%; top:50%; } .center-container { position:absolute; left:-2500px;top:-2500px; width:5000px;height:5000px; line-height:5000px; text-align:center; overflow: hidden; } .dyn-box { display: inline-block; vertical-align: middle; line-height: 100%; /* purely asthetic below this point */ background: #808080; padding: 13px; border-radius: 11px; font-family: arial; } .dyn-head { background:red; color:white; min-width: 300px; padding: 20px; font-size: 23px; } .dyn-body { padding: 10px; background:white; color:red; } </code></pre><p> <a href="http://jsfiddle.net/7mqs5/16/">смотрите пример здесь</a> . </p>

<p>как насчет ниже css для <code>#inner</code> div:</p><pre><code>#inner { width: 50%; margin-left: 25%; } </code></pre><p>я в основном использую этот css для центрирования div.</p>

<h3>центр div в div</h3><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.outer { display: -webkit-flex; display: flex; //-webkit-justify-content: center; //justify-content: center; //align-items: center; width: 100%; height: 100px; background-color: lightgrey; } .inner { background-color: cornflowerblue; padding: 2rem; margin: auto; //align-self: center; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="outer"> <div class="inner">foo foo</div> </div></code></pre> </div> </div> </p>

<p>упрости!</p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#outer { display: flex; justify-content: center; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="outer"> <div id="inner">foo foo</div> </div></code></pre></div> </div>

<p>я просто использую самое простое решение, но оно работает во всех браузерах:</p><pre><code><!doctype html> <html> <head> <meta charset="utf-8"> <title>center a div within a div?</title> <style type="text/css"> *{ margin: 0; padding: 0; } #outer{ width: 80%; height: 500px; background-color: #003; margin: 0 auto; } #outer p{ color: #fff; text-align: center; } #inner{ background-color: #901; width: 50%; height: 100px; margin: 0 auto; } #inner p{ color: #fff; text-align: center; } </style> </head> <body> <div id="outer"><p>this is the outer div</p> <div id="inner"> <p>this is the inner div</p> </div> </div> </body> </html> </code></pre>

<p>использование:</p><pre><code><div id="parent"> <div class="child"></div> </div> </code></pre><p>стиль:</p><pre><code>#parent { display: flex; justify-content: center; } </code></pre><p>если вы хотите центрировать его по горизонтали, вы должны написать так:</p><pre><code>#parent { display: flex; justify-content: center; align-items: center; } </code></pre>

<p>это возможно с помощью<strong> css 3 flexbox </strong>. у вас есть два метода при использовании flex box.</p><ol> <li>установите родительский <code>display:flex;</code> и добавьте свойства <code>{justify-content:center; ,align-items:center;}</code> к вашему родительскому элементу.</li> </ol><p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#outer{ display: flex; justify-content: center; align-items: center; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="outer" style="width:100%"> <div id="inner">foo foo</div> </div></code></pre> </div> </div> </p><ol start="2"> <li>установите родительский <code>display:flex</code> и добавьте <code>margin:auto;</code> к дочернему элементу.</li> </ol><p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#outer{ display: flex; } #inner{ margin: auto; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="outer" style="width:100%"> <div id="inner">foo foo</div> </div></code></pre> </div> </div> </p>

<p>он также может быть центрирован по горизонтали и вертикали с использованием абсолютного позиционирования, например:</p><pre><code>#outer{ position: relative; } #inner{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) } </code></pre>

<p>вы можете использовать flexbox.</p><pre><code>#inner { display: flex; justify-content: center; } </code></pre><p>вы можете узнать больше об этом по этой ссылке: <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">https://css-tricks.com/snippets/css/a-guide-to-flexbox/</a> </p>

<p>я хотел ответить на это, поскольку заметил, что никто не упомянул метод calc. используется для делителя, который вы центрируете, если вы знаете его ширину, скажем, 1200 пикселей, перейдите к:</p><pre><code>.container { width:1200px; margin-left: calc(50% - 600px); } </code></pre><p>так что в основном это добавит левое поле 50% минус половина известной ширины.</p>

<p>самый известный способ, который широко используется и работает в<strong> во многих браузерах </strong>включая старые, - это использование <code>margin</code>, как показано ниже:</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#parent { width: 100%; background-color: #cccccc; } #child { width: 30%; /*we need the width*/ margin: 0 auto; /*this does the magic*/ color: #ffffff; background-color: #000000; padding: 10px; text-align: center; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="parent"> <div id="child">i'm the child and i'm horizontally centered! my daddy is a greyish div dude!</div> </div></code></pre> </div> </div> </p><p>запустите код, чтобы увидеть, как он работает, также есть две важные вещи, которые вы не должны забывать в своем css, когда пытаетесь центрировать этот путь: <code>margin: 0 auto;</code>, которые делают его центром div, как хотелось бы, плюс не забывайте <code>width</code> дочернего элемента иначе он не будет центрирован как ожидалось! </p>

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.outer { background-color: rgb(230,230,255); width 100%; height: 50px; } .inner { background-color: rgb(200,200,255); width: 50%; height: 50px; margin: 0 auto; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="outer"> <div class="inner"> margin 0 auto </div> </div></code></pre></div> </div>

<p>начиная с 2019 года, так как этот вопрос все еще получает много просмотров, очень простой и кросс-браузерный ответ на горизонтальный центр - применить это правило к родительскому элементу:</p><pre class="lang-css prettyprint-override"><code>.parentbox { display: flex; justify-content: center } </code></pre>

<p>вот еще один способ центрировать по горизонтали, используя<strong> flexbox </strong>и без указания какой-либо ширины для внутреннего контейнера. идея состоит в том, чтобы использовать псевдоэлементы, которые будут подталкивать внутренний контент справа и слева.</p><p>использование <code>flex:1</code> в псевдоэлементе заставит их заполнить оставшиеся пробелы и принять одинаковый размер, и внутренний контейнер будет центрирован.</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.container { display: flex; border: 1px solid; } .container:before, .container:after { content: ""; flex: 1; } .inner { border: 1px solid red; padding: 5px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="container"> <div class="inner"> foo content </div> </div></code></pre> </div> </div> </p><p>мы также можем рассмотреть ту же ситуацию для вертикального выравнивания, просто изменив направление flex на столбец:</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.container { display: flex; flex-direction: column; border: 1px solid; min-height: 200px; } .container:before, .container:after { content: ""; flex: 1; } .inner { border: 1px solid red; padding: 5px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="container"> <div class="inner"> foo content </div> </div></code></pre> </div> </div> </p>

<p>это централизует ваш внутренний div по горизонтали и вертикали:</p><pre><code>#outer{ display: flex; } #inner{ margin: auto; } </code></pre><p>только для горизонтального выравнивания измените</p><pre><code>margin: 0 auto; </code></pre><p>а для вертикали поменяй</p><pre><code>margin: auto 0; </code></pre>

<p><strong>css</strong></p><pre><code>#inner { display: table; margin: 0 auto; } </code></pre><p><strong>html</strong></p><pre><code><div id="outer" style="width:100%"> <div id="inner">foo foo</div> </div> </code></pre>

<p>прочитав все ответы, я не увидел тот, который предпочитаю. вот как вы можете центрировать элемент в другом. </p><p>jsfiddle - <a href="http://jsfiddle.net/josephtveter/w3sksu1w/">http://jsfiddle.net/josephtveter/w3sksu1w/</a> </p><pre><code><p>horz center</p> <div class="outterdiv"> <div class="innerdiv horzcenter"></div> </div> <p>vert center</p> <div class="outterdiv"> <div class="innerdiv vertcenter"></div> </div> <p>true center</p> <div class="outterdiv"> <div class="innerdiv truecenter"></div> </div> .vertcenter { position: absolute; top:50%; -ms-transform: translatey(-50%); -moz-transform: translatey(-50%); -webkit-transform: translatey(-50%); transform: translatey(-50%); } .horzcenter { position: absolute; left: 50%; -ms-transform: translatex(-50%); -moz-transform: translatex(-50%); -webkit-transform: translatex(-50%); transform: translatex(-50%); } .truecenter { position: absolute; left: 50%; top: 50%; -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .outterdiv { position: relative; background-color: blue; width: 10rem; height: 10rem; margin: 2rem; } .innerdiv { background-color: red; width: 5rem; height: 5rem; } </code></pre>

<p>вы можете добавить этот код:</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#inner { width: 90%; margin: 0 auto; text-align:center; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="outer"> <div id="inner">foo foo</div> </div></code></pre> </div> </div> </p>

<p>в зависимости от ваших обстоятельств, самое простое решение может быть:</p><pre><code>margin:0 auto; float:none; </code></pre>

<blockquote> <p>самый простой ответ добавить <strong>margin: auto;</strong> к внутренней.</p> </blockquote><pre><code><div class="outer"> <div class="inner"> foo foo </div> </div> </code></pre><p>код css</p><pre><code>.outer{ width:100%; height:300px; background:yellow;} .inner{width:30%; height:200px; margin:auto; background:red; text-align:center} </code></pre><p>проверьте мою ссылку codepen <a href="http://codepen.io/feizel/pen/qdjjrk">http://codepen.io/feizel/pen/qdjjrk</a> </p><p> <a href="https://i.stack.imgur.com/iekcf.png"> <img src="https://i.stack.imgur.com/iekcf.png" alt="enter image description here"> </a> </p>

<p>дайте некоторое <code>width</code> внутреннему <code>div</code> и добавьте <code>margin:0 auto;</code> в свойство css.</p>

<p>использование:</p><pre><code><style> #outer{ text-align: center; width: 100%; } #inner{ text-align: center; } </style> </code></pre>

<p>да, это короткий и чистый код для горизонтального выравнивания. я надеюсь, что вам нравится этот код.</p><pre><code>.classname { display: box; margin: 0 auto; width: 500px /* width set as per your requirement. */; } </code></pre>

<p>используйте код ниже.</p><h3>html</h3><pre><code><div id="outer"> <div id="inner">foo foo</div> </div> </code></pre><h3>css</h3><pre><code>#outer { text-align: center; } #inner{ display: inline-block; } </code></pre>

<p>используйте этот код:</p><pre><code><div id="outer"> <div id="inner">foo foo</div> </div> #inner { width: 50%; margin: 0 auto; text-align: center; } </code></pre>

<p>вы можете сделать это, используя flex-box, ведь это хорошая техника в наши дни для использования flex-box вы должны передать <code>display: flex;</code> и <code>align-items: center;</code> своему родителю или элементу <code>#outer</code> div. код должен быть таким:</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#outer { display: flex; align-items: center; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="outer"> <div id="inner">foo foo</div> </div></code></pre> </div> </div> </p><p>это должно центрировать вашего ребенка или <code>#inner</code> горизонтально. но вы не можете увидеть какие-либо изменения. поскольку наш <code>#outer</code> div не имеет высоты или, другими словами, его высота установлена на auto, поэтому он имеет ту же высоту, что и все его дочерние элементы. поэтому после небольшого визуального оформления код результата должен выглядеть следующим образом:</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#outer { height: 500px; display: flex; align-items: center; background-color: blue; } #inner { height: 100px; background: yellow; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="outer"> <div id="inner">foo foo</div> </div></code></pre> </div> </div> </p><p>вы можете видеть, что <code>#inner</code> div теперь центрирован. flex-box - это новый метод позиционирования элементов в горизонтальных или вертикальных стеках с css, и он имеет 96% глобальной совместимости браузеров. так что вы можете свободно использовать его, и если вы хотите узнать больше о посещении flex-box <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">css-tricks</a> article, то, по моему мнению, это лучшее место для изучения с помощью flex-box.</p>

<p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="outer" style="width:100%;margin: 0 auto; text-align: center;"> <div id="inner">foo foo</div> </div></code></pre> </div> </div> </p>

<p>это так просто.</p><p>просто решите, какую ширину вы хотите дать внутреннему элементу div, и используйте следующий css.</p><h3>css</h3><pre><code>.inner{ width: 500px; // assumed width margin: 0 auto; } </code></pre>

<p>это обязательно отцентрирует ваш <code>#inner</code> по горизонтали и вертикали. это также совместимо во всех браузерах. я просто добавил дополнительный стиль, чтобы показать, как он отцентрирован.</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#outer { background: black; position: relative; width:150px; height:150px; } #inner { background:white; position: absolute; left:50%; top: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); } </code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="outer"> <div id="inner">foo foo</div> </div></code></pre> </div> </div> </p><p>но, конечно, если вы хотите, чтобы он располагался только горизонтально, это может вам помочь.</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#outer { background: black; position: relative; width:150px; height:150px; } #inner { background:white; position: absolute; left:50%; transform: translate(-50%,0); -webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -o-transform: translate(-50%,0); } </code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="outer"> <div id="inner">foo foo</div> </div></code></pre> </div> </div> </p>

<p>вы можете использовать одну строку кода, просто <code>text-align:center</code>.</p><p>вот пример:</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#inner { text-align:center; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="outer" style="width:100%"> <div id="inner"><button>hello</button></div> </div></code></pre> </div> </div> </p>

<p>один из самых простых способов сделать это - использовать <code>display: flex</code>. внешний div должен просто иметь гибкий экран, а внутренний <code>margin: 0 auto</code>, чтобы сделать его горизонтально по центру.</p><p>чтобы центрировать вертикально и просто центрировать div внутри другого div, пожалуйста, посмотрите на комментарии ниже .inner class</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper { display: flex; /* adding whatever height & width we want */ height: 300px; width: 300px; /* just so you can see it is centered */ background: peachpuff; } .inner { /* center horizontally */ margin: 0 auto; /* center vertically */ /* margin: auto 0; */ /* center */ /* margin: 0 auto; */ }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="wrapper"> <div class="inner"> i am horizontally! </div> </div></code></pre> </div> </div> </p>

<pre><code>#outer {postion: relative} #inner { width: 100px; height: 40px; position: absolute; top: 50%; margin-top:-20px; /* half of your height */ } </code></pre>

<p>извините, но этот ребенок из 1990-х просто работал для меня:</p><pre><code><div id="outer"> <center>foo foo</center> </div> </code></pre><p>собираюсь ли я в ад за этот грех?</p>

<p>лучшее, что я использовал в своих проектах </p><pre><code><div class="outer"> <div class="inner"></div> </div> .outer{ width: 500px; height: 500px; position: relative; background: yellow; } .inner{ width: 100px; height: 100px; background:red; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } </code></pre><p> <a href="https://jsfiddle.net/jaisonjjames/phacnvf4/">скриптовая ссылка</a> </p>

<p>мы могли бы использовать следующий класс css, который позволяет центрировать вертикально и горизонтально любой элемент относительно его родителя:</p><pre><code>.centerelement{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </code></pre>

<p>html:</p><pre><code><div id="outer"> <div id="inner"> </div> </div> </code></pre><p>css:</p><pre><code>#outer{ width: 500px; background-color: #000; height: 500px } #inner{ background-color: #333; margin: 0 auto; width: 50%; height: 250px; } </code></pre><p> <a href="https://jsfiddle.net/78gu7vwv/">fiddle</a> .</p>

<p>лучший способ - использовать отображение ячейки таблицы (внутреннее), которое идет сразу после div с отображаемой таблицей (внешним) и устанавливать вертикальное выравнивание для внутреннего div (с отображением ячейки таблицы) и помещать каждый тег, который вы используете во внутреннем div в центре div или страницы.</p><p>примечание: вы должны установить указанную высоту на внешнюю</p><p>это лучший способ узнать без относительного или абсолютного положения, и вы можете использовать его в любом браузере одинаково.</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#outer{ display: table; height: 100vh; width: 100%; } #inner{ display: table-cell; vertical-align: middle; text-align: center; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="outer"> <div id="inner"> <h1> set content center </h1> <div> hi this is the best way to align your items center </div> </div> </div></code></pre> </div> </div> </p>

<p>вместо нескольких оберток и/или автоматических полей мне подходит это простое решение:</p><pre><code><div style="top:50%; left:50%; height:100px; width:100px; margin-top:-50px; margin-left:-50px; background:url('lib/loading.gif') no-repeat center #fff; text-align:center; position:fixed; z-index:9002;">loading...</div> </code></pre><p>он помещает div в центр представления (по вертикали и по горизонтали), размеры и корректирует по размеру, центрирует фоновое изображение (по вертикали и по горизонтали), центрирует текст (по горизонтали) и сохраняет div в представлении и поверх содержимого. просто поместите в html <code>body</code> и наслаждайтесь.</p>

<p>попробуйте это:</p><pre><code>#outer{ display: inline-block; height: 100%; vertical-align: middle; } #outer > #inner{ display: inline-block; font-size: 19px; margin: 20px; max-width: 320px; min-height: 20px; min-width: 30px; padding: 14px; vertical-align: middle; } </code></pre>

<p>это сработало для меня:</p><pre><code> #inner { position: absolute; margin: 0 auto; left: 0; width: 7%; right: 0; } </code></pre><p>в этом коде вы должны определить ширину элемента.</p>

<p>я нашел похожее с <code>margin-left</code>, но также может быть <code>left</code>.</p><pre><code>#inner{ width: 100%; max-width: 65px; /*to adapt to screen width. can be whatever you want*/ left: 65px; /*this has to be approximately the same as the max-width*/ } </code></pre>

<p>добавьте css к своему внутреннему div. установите <code>margin: 0 auto</code> и установите его ширину менее 100%, что является шириной внешнего div.</p><pre><code><div id="outer" style="width:100%"> <div id="inner" style="margin:0 auto;width:50%">foo foo</div> </div> </code></pre><p>это даст желаемый результат.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#inner { display: table; margin: 0 auto; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="outer" style="width:100%"> <div id="inner">foo foo</div> </div></code></pre> </div> </div> </p>

<p>я знаю, что немного опоздал с ответом на этот вопрос, и я не удосужился прочитать каждый ответ, так что <em>может</em> быть дубликатом. <a href="http://jsfiddle.net/spikey/fll5z/">вот мой дубль</a> :</p><pre><code>inner { width: 50%; background-color: khaki; margin: 0 auto; } </code></pre>

<pre><code>#inner { width: 50%; margin: 0 auto; } </code></pre>

<p>просто <code>margin:0px auto</code>:</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#inner{ display: block; margin: 0px auto; width: 100px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="outer" style="width:100%"> <div id="inner">foo foo</div> </div></code></pre> </div> </div> </p>

<p><strong>добавить <code>text-align:center;</code> в родительский div</strong> </p><pre><code>#outer { text-align: center; } </code></pre><p> <a href="https://jsfiddle.net/7qwxx9rs/">https://jsfiddle.net/7qwxx9rs/</a> </p><p>или же </p><pre><code>#outer > div { margin: auto; width: 100px; } </code></pre><p> <a href="https://jsfiddle.net/f8su1flz/">https://jsfiddle.net/f8su1flz/</a> </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#outer { width: 160px; padding: 5px; border-style: solid; border-width: thin; display: block; } #inner { margin: auto; background-color: lightblue; border-style: solid; border-width: thin; width: 80px; padding: 10px; text-align: center; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="outer"> <div id="inner">foo foo</div> </div></code></pre> </div> </div> </p>

<p>основными атрибутами для центрирования div являются <code>margin: auto</code> и <code>width:</code> в соответствии с требованиями:</p><pre><code>.divcenter{ width: 50%; margin: auto; border: 3px solid #000; padding: 10px; } </code></pre>

<pre><code>div{ width:100px; height:100px; margin:0 auto; } </code></pre><p>для нормальной вещи, если вы используете div статический способ</p><p>если вы хотите, чтобы div был в центре, когда div является абсолютным по отношению к своему родителю, вот пример:</p><pre><code>.parentdiv{ position:relative; height:500px; } .child\_div{ position:absolute; height:200px; width:500px; left:0; right:0; margin:0 auto; } </code></pre>

<p>вы можете сделать это по-другому. смотрите ниже примеры:</p><pre><code>1. first method #outer { text-align: center; width: 100%; } #inner { display: inline-block; } 2. second method #outer { position: relative; overflow: hidden; } .centered { position: absolute; left: 50%; } </code></pre>

<p>попробуй это:</p><pre><code><div id="a"> <div id="b"></div> </div> </code></pre><p>css:</p><pre><code>#a{ border: 1px solid red; height: 120px; width: 400px } #b{ border: 1px solid blue; height: 90px; width: 300px; position: relative; margin-left: auto; margin-right: auto; } </code></pre>

<p>прежде всего: вам нужно дать ширину второму div:</p><p>например:</p><h3>html</h3><pre><code><div id="outter"> <div id="inner"centered content"> </div </div> </code></pre><h3>css:</h3><pre><code> #inner{ width: 50%; margin: auto; } </code></pre><p>обратите внимание, что если вы не укажете ширину, она займет всю ширину линии.</p>