Как горизонтально центрировать <div>?
Как я могу горизонтально центрировать <div>
в другом <div>
используя CSS?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
138 ответов
Это так просто.
Просто решите, какую ширину вы хотите дать внутреннему элементу div, и используйте следующий CSS.
CSS
.inner{
width: 500px; // Assumed width
margin: 0 auto;
}
Вы можете добавить этот код:
#inner {
width: 90%;
margin: 0 auto;
text-align:center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
#outer
{
display: grid;
justify-content: center;
}
<div id="outer">
<div id="inner">hello</div>
</div>
enter code here
CSS свойство justify-content
Он выравнивает элементы Flexbox по центру контейнера:
#outer {
display: flex;
justify-content: center;
}
Один из самых простых способов сделать это - использовать display: flex
, Внешний div просто должен иметь гибкий экран, а внутренние потребности margin: 0 auto
чтобы сделать его горизонтально по центру.
Чтобы центрировать вертикально и просто центрировать div внутри другого div, пожалуйста, посмотрите на комментарии ниже.inner class
.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; */
}
<div class="wrapper">
<div class="inner">
I am horizontally!
</div>
</div>
Я видел много-много ответов, и все они устарели. Google уже реализовал решение этой общей проблемы, которое центрирует объект буквально посередине, что бы ни случилось, и ДА, оно реагирует. Так что никогда не делай
transform()
или же
position
вручную когда-либо снова.
.HTML
...
<div class="parent">
<form> ... </form>
<div> ... </div>
</div>
.CSS
.parent {
display: grid;
place-items: center;
}
#outer {postion: relative}
#inner {
width: 100px;
height: 40px;
position: absolute;
top: 50%;
margin-top:-20px; /* Half of your Height */
}
Да, это короткий и чистый код для горизонтального выравнивания. Я надеюсь, что вам нравится этот код.
.classname {
display: box;
margin: 0 auto;
width: 500px /* Width set as per your requirement. */;
}
Наилучший способ - использовать отображение ячейки таблицы (внутреннее), которое идет сразу после div с отображаемой таблицей (внешним) и устанавливать вертикальное выравнивание для внутреннего div (с отображением ячейки таблицы) и помещать каждый тег, который вы используете во внутреннем div в центре div или страницы.
Примечание: вы должны установить указанную высоту на внешнюю
Это лучший способ узнать без относительного или абсолютного положения, и вы можете использовать его в любом браузере одинаково.
#outer{
display: table;
height: 100vh;
width: 100%;
}
#inner{
display: table-cell;
vertical-align: middle;
text-align: center;
}
<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>
Просто просто Margin:0px auto
:
#inner{
display: block;
margin: 0px auto;
width: 100px;
}
<div id="outer" style="width:100%">
<div id="inner">Foo foo</div>
</div>
Основными атрибутами для центрирования div являются margin: auto
а также width:
согласно требованиям:
.DivCenter{
width: 50%;
margin: auto;
border: 3px solid #000;
padding: 10px;
}
Я знаю, что немного опоздал с ответом на этот вопрос, и я не удосужился прочитать каждый ответ, так что это может быть дубликат. Вот мое мнение:
inner { width: 50%; background-color: Khaki; margin: 0 auto; }
Попробуй это:
<div id="a">
<div id="b"></div>
</div>
CSS:
#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;
}
HTML:
<div id="outer">
<div id="inner">
</div>
</div>
CSS:
#outer{
width: 500px;
background-color: #000;
height: 500px
}
#inner{
background-color: #333;
margin: 0 auto;
width: 50%;
height: 250px;
}
#inner {
display: table;
margin: 0 auto;
}
<div id="outer" style="width:100%">
<div id="inner">Foo foo</div>
</div>
Вы можете горизонтально центрировать внутри другого
<div>
используя
text-align
Свойство в CSS.
text-align: center
используется для центрирования текста внешнего div по горизонтали.
text-align: right
используется для выравнивания текста по правому краю.
text-align: left
используется для выравнивания текста по левому краю.
text-align: justify
используется для растягивания линий, чтобы каждая линия имела одинаковую ширину.
Вместо нескольких оберток и / или автоматических полей мне подходит это простое решение:
<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>
Он помещает div в центр представления (по вертикали и по горизонтали), размеры и корректирует по размеру, центрирует фоновое изображение (по вертикали и по горизонтали), центрирует текст (по горизонтали) и сохраняет div в представлении и поверх содержимого. Просто поместите в HTML body
и наслаждаться.
Вы можете сделать это по-другому. Смотрите ниже примеры:
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%;
}
Я нашел подобное с margin-left
, но может быть left
также.
#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*/
}
Прежде всего: вам нужно дать ширину второму div:
Например:
HTML
<div id="outter">
<div id="inner"Centered content">
</div
</div>
CSS:
#inner{
width: 50%;
margin: auto;
}
Обратите внимание, что если вы не укажете ширину, она займет всю ширину линии.
#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;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Обновленный 2022 г. Центрирующий элемент по горизонтали
1. Горизонтальное центрирование с помощью flexbox
Для горизонтального центрирования таких элементов, как (div), необходимо добавитьdisplay:flex
иjustify-content:center
к элементу класса css.
<div class="center">
<h1>I'm Horizontally center</h1>
</div>
.center{
display:flex;
justify-content:center;
}
2. Горизонтальное центрирование с использованием полей
В приведенном ниже примере показано, как центрировать элементы по горизонтали, используяmargins
иwidth
.
.center{
width:50%;
margin:0 auto;
}
В приведенном выше коде добавилиwidth:50%
иmargin:0 auto
так что элемент поровну разделяет доступное пространство междуleft
иright
поля.
3. Горизонтальное центрирование с помощью преобразования
В приведенном ниже примере показано, как центрировать элементы по горизонтали, используяposition
иtransform
характеристики.
.center{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
- Впервые добавлено
position:absolute
, так что этот элемент выходит из обычного потока документов. - во-вторых, мы добавили
left:50%
, чтобы этот элемент двигался вперед50%
по направлению к оси x. - В-третьих, мы добавили
transform:translateX(-50%)
, чтобы этот элемент отодвинулся на 50% назад и выровнялся по центру.
добавлять text-align:center;
в родительский div
#outer {
text-align: center;
}
https://jsfiddle.net/7qwxx9rs/
или же
#outer > div {
margin: auto;
width: 100px;
}
Я просто предлагаю использовать
justify-content: center;
когда контейнер отображается как гибкий. а также
text-align: center;
когда речь идет о текстовом элементе.
проверьте приведенный ниже код и измените его в соответствии с требованиями.
<div id="outer">
<div id="inner">Foo foo</div>
</div>
#outer{
display:flex;
align-items:center;
}
Элемент можно центрировать по горизонтали, используя свойство CSS Flexbox.
<div class="container">
<div class="res-banner">
<img class="imgmelk" src="~/File/opt_img.jpg" >
</div>
</div>
css-код
.res-banner{
width:309px;
margin: auto;
height:309px;
}