Як централізувати кнопку в розділі?

У мене є div, ширина якого 100%.

Я хотів би зафіксувати кнопку в ньому, як я можу це зробити?

<div style="width:100%; height:100%; border: 1px solid">
  <button type="button">hello</button>
</div>

Оновлений відповідь

Оновлення, оскільки я помітив, що це активна відповідь, проте Flexbox був би правильним підходом зараз.

Демонстраційна демонстрація

Вертикальне та горизонтальне вирівнювання.

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

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

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

Оригінальний відповідь за допомогою фіксованої ширини та без флекси

Якщо оригінальний плакат хоче вертикальне і центральне вирівнювання, його досить легко встановити за фіксованою шириною та висотою кнопки, спробуйте наступне

Демонстраційна демонстрація

CSS

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

для горизонтального вирівнювання використовуйте будь-який

button{
    margin: 0 auto;
}

або

div{
    text-align:center;
}

Ви можете просто зробити:

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

Або ви могли зробити це так:

<div style="border: 1px solid">
  <input type="button" value="button" style="display: block; margin: 0 auto;">
</div>

Перший центр буде вирівняти все, що знаходиться всередині div. Інший буде по центру вирівнювати лише кнопку.

et voila:

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

Оновлення : Якщо ОП шукає горизонтальний і вертикальний центр, ця відповідь буде робити це для елемента з фіксованою шириною / висотою.

Маржа: 0 авто; є правильною відповіддю лише для горизонтального центрування. Для центрування обох способів працює щось подібне, використовуючи 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);

Оновлення ... через п'ять років можна було використовувати флекси на батьківському елементі 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>

З обмеженою кількістю деталей, я припускаю найпростішу ситуацію і скажу, що ви можете використовувати text-align: center:

http://jsfiddle.net/pMxty/

Використання флексбоксу

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

А потім додавання класу до вашої кнопки.

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

Слід просто взяти сюди:

спочатку у вас є початкове положення тексту або кнопки:

<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, який містить тег кнопок

стиль: "вирівнювання тексту: центр;"

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

<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>

Підібравшись до цього, я подумав, що я покину рішення, яке я використав, і який використовує line-heightі text-align: centerвертикальне, і горизонтальне центрування:

Клацніть тут, щоб працювати JSFiddle

Для центрування <button type = "button">як вертикально, так і горизонтально в межах <div>ширини, яка обчислюється динамічно, як у вашому випадку, це робити:

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

2. Для вертикального вирівнювання вам потрібно буде встановити margin: valuepx;кнопку. Це правило щодо розрахунку valuepx:

   valuepx = (wrappingDIVheight - buttonHeight)/2

Ось демонстрація JS Bin .

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

Найпростіше ввести це як "div", дайте йому "margin: 0 auto", але якщо ви хочете, щоб він був по центру, вам потрібно надати йому ширину

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

Функція чуйного 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/

Чуйний спосіб центрувати свою кнопку в діві:

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

Припустимо, що div є #div, а кнопка - # кнопка:

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

#button {}

Потім натисніть кнопку в діві, як зазвичай.