Как центрировать кнопку в div?

Ответ 1

Обновленный ответ

Обновление, потому что я заметил, что это активный ответ, однако теперь Flexbox будет правильным.

Live Demo

Вертикальное и горизонтальное выравнивание.

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

Просто горизонтально (до тех пор, пока основная ось гибкого диска будет горизонтальной по умолчанию)

#wrapper {
  display: flex;
  justify-content: center;
}

Исходный ответ с использованием фиксированной ширины и flexbox

Если исходный плакат хочет, чтобы вертикальное и центральное выравнивание было достаточно простым для фиксированной ширины и высоты кнопки, попробуйте следующее

Live Demo

CSS

button{
    height:20px; 
    width:100px; 
    margin: -20px -50px; 
    position:relative;
    top:50%; 
    left:50%;
}

только для горизонтального выравнивания используйте либо

button{
    margin: 0 auto;
}

или

div{
    text-align:center;
}

Ответ 2

Вы можете просто сделать:

<div style="text-align: center; border: 1px solid">
  <input type="button" value="button">
</div>

Ответ 3

et voila:

button {
  width: 100px; // whatever your button width
  margin: 0 auto; // auto left/right margins
}

Обновление: если OP ищет горизонтальный и вертикальный центр, этот ответ сделает это для элемента фиксированной ширины/высоты.

Ответ 4

Маржа: 0 auto; является правильным ответом только для горизонтального центрирования. Для центрирования в обоих направлениях будет работать что-то подобное, используя jquery:

var cenBtn = function() {
   var W = $(window).width();
   var H = $(window).height();
   var BtnW = insert button width;
   var BtnH = insert button height;
   var LeftOff = (W / 2) - (BtnW / 2);
   var TopOff = (H / 2) - (BtnH /2);
       $("#buttonID").css({left: LeftOff, top: TopOff});
};

$(window).bind("load, resize", cenBtn);

Обновление... через пять лет можно использовать flexbox для родительского элемента DIV, чтобы легко центрировать кнопку как по горизонтали, так и по вертикали.

Включая все префиксы браузера, для лучшей поддержки

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

#container {
  position: relative;
  margin: 20px;
  background: red;
  height: 300px;
  width: 400px;
}

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

<!-- using a container to make the 100% width and height mean something -->
<div id="container"> 
  <div style="width:100%; height:100%">
    <button type="button">hello</button>
  </div>
</div>

Ответ 5

При наличии ограниченной детали я возьму на себя самую простую ситуацию и скажу, что вы можете использовать text-align: center:

http://jsfiddle.net/pMxty/

Ответ 6

Использование flexbox

.Center {
  display: flex;
  align-items: center;
  justify-content: center;
}

А затем добавив класс к вашей кнопке.

<button class="Center">Demo</button> 

Ответ 7

Вы должны принять это просто:

сначала у вас есть начальная позиция вашего текста или кнопки:

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
   <h2> Simple Text </h2>
      <div>
           <button> Simple Button </button>
      </div>
</div>

Добавив эту строку кода CSS в тег h2 или в тег div, который содержит тег кнопки

style:" text-align:center; "

Окончательно Код результата будет:

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
<h2 style="text-align:center;"> Simple Text </h2> <!-- <<--- here the changes -->

      <div style="text-align:center">        <!-- <<--- here the changes -->
                <button> Simple Button </button>
      </div>
</div>

Ответ 8

Перешел через это и подумал, что я оставлю решение, которое я использовал, которое использует line-height и text-align: center для вертикального и горизонтального центрирования:

Нажмите здесь для работы JSFiddle

Ответ 9

Чтобы центрировать a <button type = "button"> как по вертикали, так и по горизонтали внутри <div>, ширина которого вычисляется динамически, как в вашем случае, это то, что нужно сделать:

• Установите text-align: center; на обертку <div>: она будет центрировать кнопку при каждом изменении размера <div> (или, скорее, окна)

• Для вертикального выравнивания вам нужно установить margin: valuepx; для кнопки. Это правило о том, как рассчитать valuepx:

  valuepx = (wrappingDIVheight - buttonHeight)/2

Вот JS Bin demo.

Ответ 10

Очень простой ответ, который будет применяться в большинстве случаев, - просто установить поле на 0 auto и установить block дисплея. Вы можете увидеть, как я центрировал свою кнопку в моей демонстрации на CodePen

Ответ 11

Предположим, что div это #div, а кнопка #button:

#div {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: center;
}

#button {}

Затем вложите кнопку в div как обычно.

Ответ 12

Простейшая вещь вводит его как "div", давая ему "margin: 0 auto", но если вы хотите, чтобы он был центрирован, вам нужно дать ему ширину

  Div{
   Margin: 0 auto ;
   Width: 100px ;
  }

Ответ 13

Отзывчивая опция CSS для центрирования кнопки по вертикали и горизонтали без учета размера родительского элемента (с использованием атрибутов атрибутов атрибутов для ясности и разделения):

HTML

<div data-element="card">
  <div data-container="button"><button>CTA...</button></div>
</div>

CSS

[data-container="button"] {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
}

Fiddle: https://jsfiddle.net/crrollyson/zebo1z8f/

Ответ 14

Отзывчивый способ центрировать вашу кнопку в div:

<div 
    style="display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;">
    <button type="button" style="height: 10%; width: 20%;">hello</button>
</div>