Bagaimana cara memusatkan tombol di dalam div?

Saya memiliki div yang lebarnya 100%.

Saya ingin memusatkan tombol di dalamnya, bagaimana saya bisa melakukan ini?

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

Jawaban yang Diperbarui

Memperbarui karena saya perhatikan itu jawaban aktif, namun Flexbox akan menjadi pendekatan yang benar sekarang.

Demo Langsung

Penjajaran vertikal dan horizontal.

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

Hanya horisontal (selama sumbu flex utama adalah horisontal yang merupakan standar)

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

Jawaban Asli menggunakan lebar tetap dan tidak ada flexbox

Jika poster asli menginginkan pelurusan vertikal dan tengah, cukup mudah untuk lebar dan tinggi tombol yang tetap, coba yang berikut ini

Demo Langsung

CSS

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

hanya untuk menggunakan perataan horisontal

button{
    margin: 0 auto;
}

atau

div{
    text-align:center;
}

Anda bisa saja membuat:

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

Atau Anda bisa melakukannya seperti ini:

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

Yang pertama akan memusatkan menyelaraskan semua yang ada di dalam div. Yang lain akan memusatkan menyelaraskan hanya tombol.

et voila:

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

Pembaruan : Jika OP mencari pusat horizontal dan vertikal, jawaban ini akan melakukannya untuk elemen lebar / tinggi tetap.

Margin: 0 otomatis; adalah jawaban yang benar untuk pemusatan horizontal saja. Untuk memusatkan kedua cara, sesuatu seperti ini akan berfungsi, menggunakan 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);

Perbarui ... lima tahun kemudian , seseorang dapat menggunakan flexbox pada elemen DIV induk untuk dengan mudah memusatkan tombol baik secara horizontal maupun vertikal.

Termasuk semua awalan peramban, untuk dukungan terbaik

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>

Dengan detail terbatas yang disediakan, saya akan mengasumsikan situasi yang paling sederhana dan mengatakan Anda dapat menggunakan text-align: center:

http://jsfiddle.net/pMxty/

Menggunakan flexbox

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

Dan kemudian menambahkan kelas ke tombol Anda.

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

Anda harus membuatnya sederhana di sini Anda pergi:

pertama Anda memiliki posisi awal teks atau tombol Anda:

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

Dengan menambahkan baris kode css ini ke tag h2 atau ke tag div yang menyimpan tag tombol

style: "text-align: center;"

Akhirnya kode hasil akan menjadi:

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

Datangi ini dan berpikir saya akan meninggalkan solusi yang saya gunakan juga, yang memanfaatkan line-heightdan text-align: centermelakukan pemusatan vertikal dan horizontal:

Klik di sini untuk bekerja JSFiddle

Untuk memusatkan secara <button type = "button">vertikal dan horizontal dalam <div>lebar yang dihitung secara dinamis seperti pada kasus Anda, inilah yang harus dilakukan:

1. Setel text-align: center;ke pembungkus <div>: ini akan memusatkan tombol setiap kali Anda mengubah ukuran <div>(atau lebih tepatnya jendela)

2. Untuk penyelarasan vertikal, Anda perlu mengatur margin: valuepx;tombol. Ini adalah aturan tentang cara menghitung valuepx:

   valuepx = (wrappingDIVheight - buttonHeight)/2

Berikut ini adalah demo JS Bin .

Jawaban super sederhana yang akan berlaku untuk sebagian besar kasus adalah dengan hanya mengatur margin 0 autodan mengatur tampilan block. Anda dapat melihat bagaimana saya memusatkan tombol saya di demo saya di CodePen

Hal yang paling mudah adalah memasukkannya sebagai "div", berikan "margin: 0 auto" tetapi jika Anda ingin memusatkannya, Anda harus memberi lebar.

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

Opsi CSS responsif untuk memusatkan tombol secara vertikal dan horizontal tanpa memedulikan ukuran elemen induk (menggunakan kait atribut data untuk masalah kejelasan dan pemisahan) :

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/

Cara responsif untuk memusatkan tombol Anda di 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>

Misalkan div adalah #div dan tombol adalah #button:

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

#button {}

Kemudian bersarang tombol ke div seperti biasa.