Как центрировать кнопку внутри элемента?

Question

У меня есть div, ширина которого составляет 100%.

Я бы хотел разместить в нем кнопку, как я могу это сделать?

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

Answer 1

Отзывчивый параметр 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%;
}

Скрипка: https://jsfiddle.net/crrollyson/zebo1z8f/

Answer 2

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

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

Answer 3

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

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

#button {}

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

Answer 4

Отзывчивый способ центрировать вашу кнопку в 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>