Bir düğmeyi div içinde nasıl ortalayabilirim?

Genişliği% 100 olan bir div var.

İçinde bir düğme ortalamak istiyorum, bunu nasıl yapabilirim?

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

Güncellenmiş Yanıt

Güncellemenin aktif bir yanıt olduğunu fark ettiğim için güncelleniyor, ancak Flexbox şimdi doğru yaklaşım olacaktır.

Canlı Demo

Dikey ve yatay hizalama.

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

Sadece yatay (ana esnek eksen yatay olduğu sürece varsayılan)

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

Sabit genişlikli ve flexbox içermeyen orijinal cevap

Orijinal poster, düğmenin sabit genişliği ve yüksekliği için dikey ve orta hizalama istiyorsa, aşağıdakileri deneyin

Canlı Demo

CSS

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

sadece yatay hizalama için

button{
    margin: 0 auto;
}

veya

div{
    text-align:center;
}

Sadece şunları yapabilirsiniz:

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

Veya bunun yerine şu şekilde yapabilirsiniz:

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

Birincisi div içindeki her şeyi merkeze hizalar. Diğeri sadece düğmeyi ortada hizalayacaktır.

et voila:

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

Güncelleme : OP yatay ve dikey merkez arıyorsa, bu cevap bunu sabit bir genişlik / yükseklik elemanı için yapacaktır.

Kenar boşluğu: 0 otomatik; yalnızca yatay merkezleme için doğru cevaptır. Her iki yolu ortalamak için jquery kullanarak böyle bir şey işe yarayacaktır:

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

Güncelleme ... beş yıl sonra , düğmeyi hem yatay hem de dikey olarak kolayca ortalamak için üst DIV öğesinde flexbox kullanılabilir.

En iyi destek için tüm tarayıcı öneklerini içerir

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>

Sağlanan sınırlı ayrıntıyla, en basit durumu kabul edeceğim ve kullanabileceğinizi söyleyeceğim text-align: center:

http://jsfiddle.net/pMxty/

Flexbox kullanma

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

Ve sonra düğmenize sınıfı ekleyin.

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

İşte bu kadar basit olmalı:

önce metninizin veya düğmenizin başlangıç ​​konumuna sahip olursunuz:

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

Bu css kod satırını h2 etiketine veya düğme etiketini tutan div etiketine ekleyerek

style: "text-align: center;"

Sonuç Sonuç kodu:

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

Buna rastladım ve hem dikey hem de yatay merkezlemeyi kullanan line-heightve yaptığım çözümü de bırakacağımı düşündüm text-align: center:

Çalışmak için buraya tıklayın JSFiddle

Bir genişliği, sizin durumunuzda olduğu gibi dinamik olarak hesaplanan <button type = "button">bir dikey ve yatay olarak ortalamak <div>için aşağıdakileri yapmanız gerekir:

1. text-align: center;Kaydırmaya ayarlayın <div>: her yeniden boyutlandırdığınızda düğmenin ortası<div> (veya pencereyi

2. Dikey hizalama margin: valuepx;için düğmeyi ayarlamanız gerekir . Bu nasıl hesaplanacağına dair kuraldır valuepx:

   valuepx = (wrappingDIVheight - buttonHeight)/2

İşte bir JS Bin demosu .

Çoğu durumda uygulanacak süper basit cevap, sadece kenar boşluğunu 0 autoayarlamak ve ekranı olarak ayarlamaktır block. CodePen'deki demomda düğümü nasıl ortaladığımı görebilirsiniz

En kolay şey "div" olarak girerek "kenar boşluğu: 0 otomatik" olarak girer, ancak ortalanmasını istiyorsanız genişlik vermeniz gerekir

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

Bir düğmeyi üst öğe boyutuyla ilgilenmeden dikey ve yatay olarak ortalamak için duyarlı CSS seçeneği (netlik ve ayırma endişeleri için veri özelliği kancalarını kullanarak) :

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%;
}

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

Düğmenizi div içinde ortalamanın duyarlı yolu:

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

Diyelim ki div #div ve düğme #düğmesi:

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

#button {}

Ardından düğmeyi her zamanki gibi div içine yerleştirin.