CSS: центральный элемент в элементе <div>

Ответ 1

Установить text-align:center; для родительского div и margin:auto; ребенку див.

#parent {
    text-align:center;
    background-color:blue;
    height:400px;
    width:600px;
}
.block {
    height:100px;
    width:200px;
    text-align:left;
}
.center {
    margin:auto;
    background-color:green;
}
.left {
    margin:auto auto auto 0;
    background-color:red;
}
.right {
    margin:auto 0 auto auto;
    background-color:yellow;
}

<div id="parent">
    <div id="child1" class="block center">
        a block to align center and with text aligned left
    </div>
    <div id="child2" class="block left">
        a block to align left and with text aligned left
    </div>
    <div id="child3" class="block right">
        a block to align right and with text aligned left
    </div>
</div>

Ответ 2

На самом деле это очень просто с CSS3 flex box.

.flex-container{
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  
  justify-content: center;
  align-items: center;
  
  width: 400px;
  height: 200px;
  background-color: #3498db;
}

.inner-element{
  width: 100px;
  height: 100px;
  background-color: #f1c40f;
}

<div class="flex-container">
  <div class="inner-element"></div>
</div>

Ответ 3

CSS

  body{
    text-align:center;
    }
    .divWrapper{
    width:960px //Change it the to width of the parent you want
    margin: 0 auto;
    text-align:left;
    }

HTML

<div class="divWrapper">Tada!!</div>

Это должно центрировать div

2016 - метод HTML5 + CSS3

CSS

div#relative{
  position:relative;
}

div#thisDiv{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

HTML

<div id="relative">
  <div id="thisDiv">Bla bla bla</div>
</div>

Fiddledlidle

https://jsfiddle.net/1z7m83dx/

Ответ 4

text-align:center; в родительском div Должен сделать трюк

Ответ 5

Является ли div фиксированной шириной или шириной жидкости? В любом случае, для ширины жидкости вы можете использовать:

#element { /* this is the child div */
margin-left:auto;
margin-right:auto;
/* Add remaining styling here */
}

Или вы можете установить родительский div в text-align:center;, а дочерний div - text-align:left;.

И left:50%; только центрирует его по всей странице, когда div установлен на position:absolute;. Если вы установили div в left:50%;, он должен сделать это относительно родительской ширины div. Для фиксированной ширины сделайте следующее:

#parent {
width:500px;
}

#child {
left:50%;
margin-left:-100px;
width:200px;
}

Ответ 6

просто укажите родительский div position: relative

Ответ 7

Прежде всего, вы можете сделать это с левым: 50%, чтобы центрировать его относительно родительского div, но для этого вам нужно изучить CSS-позиционирование.

Одно из возможных решений многих - сделать что-то вроде

    div.parent { text-align:center; }    //will center align every thing in this div as well as in the children element
    div.parent div { text-align:left;}   //to restore so every thing would start from left

если ваш ваш div, чтобы быть центрированным, позиционируется относительно, вы можете просто сделать

    .mydiv { position:relative; margin:0 auto; } 

Ответ 8

left: 50% работает реже с ближайшим родителем с назначенной статической шириной. Попробуйте ширину: 500 пикселей или что-то в родительском div. В качестве альтернативы сделайте содержимое, которое вам нужно, чтобы отобразить центр: заблокируйте и установите левое и правое поля в автоматическое.

Ответ 9

Если дочерний элемент является встроенным (например, не div, table и т.д.), я бы обернул его внутри div или p и сделаю текст обертки совпадающим с css-свойством равным центру.

    <div id="container">
        This text is aligned to the left.<br>
        So is this text.<br>
        <div style="text-align: center">
            This <button>button</button> is centered.
        </div>
        This text is still aligned left.
    </div>

В противном случае, если элемент является блоком (display: block, например, div или p) с фиксированной шириной, я бы автоматически задал свойства поля слева и справа css.

    <div id="container">
        This text is aligned to the left.<br>
        So is this text.<br>
        <div style="margin: 0 auto; width: 200px; background: red; color: white;">
            My parent is centered.
        </div>
        This text is still aligned left.
    </div>

Конечно, вы можете добавить элемент text-align: center к элементу обертки, чтобы сделать его содержимое также центрированным.

Я не буду беспокоиться о позиционировании, потому что IMHO это не путь для решения проблемы OP, но обязательно проверьте эта ссылка, очень полезно.

Ответ 10

Создайте новый элемент div для вашего элемента в центр, затем добавьте класс специально для центрирования этого элемента, как этот

<div id="myNewElement">
    <div class="centered">
        <input type="button" value="My Centered Button"/>
    </div>
</div>

Css

.centered{
    text-align:center;
}

Ответ 11

Я нашел другое решение

<style type="text/css">
    .container {
        width:600px; //set how much you want
        overflow: hidden; 
        position: relative;
     }
     .containerSecond{
        position: absolute; 
        top:0px; 
        left:-500%; 
        width:1100%;
     }
     .content{
        width: 800px; //your content size 
        margin:0 auto;
     }           
</style>

и в теле

<div class="container">
   <div class="containerSecond">
       <div class="content"></div>
   </div>
</div>

Это центрирует ваш контент div всякий раз, когда ваш контейнер больше или меньше. В этом случае ваш контент должен быть больше 1100% контейнера, чтобы его не центрировали, но в этом случае вы можете сделать с контейнером больше, и он будет работать

Ответ 12

Назначьте text-align: center; родительскому элементу и display: inline-block; в div.

Ответ 13

Если вы хотите использовать CSS3:

position:absolute;
left:calc(50% - PutTheSizeOfTheHalfOfYourElementpx);

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

Ответ 14

например, у меня есть статья div, которая находится внутри основного содержимого div. Внутри статьи изображение и под этим изображением - кнопка, стиль которой выглядит следующим образом:

.article {

width: whatever;
text-align: center; 
float: whatever (in case you got more articles in a row); 
margin: give it whatever margin you want;

} .article {

}

/* внутри статьи я хочу, чтобы изображение было центрировано */

.article img {

float: none;
margin: 0 auto;
padding: give it a padded ridge if you want;

}

/* Теперь под этим изображением в том же элементе статьи должна появиться кнопка типа read more Конечно, вам нужно работать с em или%, когда она находится внутри отзывчивого дизайна */

.button {

background: #whatever color:
padding: 4.3567%; /*Instead of fixed width*/
text-align: cente;
font: whatever;
max-width: 41.4166%;
float: none;
margin: 0 auto; /* You could make the zero into any margin you want on the top and bottom of this button.. Just notice the float: none property.. this wil solve most your issues, also check if maybe position and displaay might mess up your code..*/

}

Удачи.

Ответ 15

Если вы хотите центрировать элементы внутри div и не заботитесь о размере деления, вы можете использовать силу Flex. Я предпочитаю использовать flex и не использовать точный размер для элементов.

<div class="outer flex">
    <div class="inner">
        This is the inner Content
    </div>
</div>

Как вы можете видеть, Outer div является контейнером Flex, а Inner должен быть элементом Flex, указанным в flex: 1 1 auto;, чтобы лучше понять, что вы можете увидеть этот простой пример. http://jsfiddle.net/QMaster/hC223/

Надеюсь на эту помощь.

Ответ 16

Этот пост обеспечивает хорошее решение - http://mindthesemicolon.com/how-to-center-an-element-vertically-and-horizontally-using-css/ В основном: 1. Установите ребенка в положение абсолютное. 2. Установите родительскую позицию относительно позиции. 3. Установите дочерние элементы слева и сверху на 50%. 4. переведите (-50%, - 50%), чтобы сдвинуть влево и вверх на половину ширины дочернего элемента.

Ответ 17

мой хотел бы магии.

html, body {
 height: 100%;
}

.flex-container{
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}


<div class="flex-container">
  <div>Content</div>
</div>

Ответ 18

<html>
<head>
</head>
<style>
  .out{
    width:200px;
    height:200px;
    background-color:yellow;
  }
   .in{
    width:100px;
    height:100px;
    background-color:green;
    margin-top:50%;
    margin-left:50%;
    transform:translate(-50%,50%);
  }
</style>
  <body>
     <div class="out">
     <div class="in">

     </div>
     </div> 
  </body>
</html>

Ответ 19

Для центрирования только конкретного ребенка:

.parent {
  height: 100px;
  background-color: gray;
  position: relative;
}

.child {
  background-color: white;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 20px;
  height:20px;
  margin: auto;

}

<div class="parent">
   <span class="child">hi</span>
</div>