Wie zentriere ich eine Schaltfläche innerhalb eines Div?

Ich habe ein Div, dessen Breite 100% beträgt.

Ich möchte einen Knopf darin zentrieren. Wie kann ich das tun?

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

Aktualisierte Antwort

Aktualisieren, weil ich bemerkt habe, dass es eine aktive Antwort ist, aber Flexbox wäre jetzt der richtige Ansatz.

Live-Demo

Vertikale und horizontale Ausrichtung.

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

Nur horizontal (solange die Hauptflexachse horizontal ist, was standardmäßig ist)

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

Originalantwort mit fester Breite und ohne Flexbox

Wenn das Originalposter eine vertikale und mittlere Ausrichtung für eine feste Breite und Höhe der Schaltfläche wünscht, versuchen Sie Folgendes

Live-Demo

CSS

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

Verwenden Sie entweder nur für die horizontale Ausrichtung

button{
    margin: 0 auto;
}

oder

div{
    text-align:center;
}

Sie könnten einfach machen:

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

Oder Sie könnten es stattdessen so machen:

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

Der erste wird alles innerhalb des Div zentrieren. Der andere richtet nur die Taste in der Mitte aus.

et voila:

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

Update : Wenn OP nach horizontaler und vertikaler Mitte sucht, wird diese Antwort dies für ein Element mit fester Breite / Höhe tun.

Margin: 0 auto; ist die richtige Antwort nur für die horizontale Zentrierung. Für die Zentrierung in beide Richtungen funktioniert so etwas mit 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);

Update ... fünf Jahre später könnte man die Flexbox auf dem übergeordneten DIV-Element verwenden, um die Schaltfläche einfach horizontal und vertikal zu zentrieren.

Einschließlich aller Browserpräfixe für beste Unterstützung

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>

Mit den begrenzten Details gehe ich von der einfachsten Situation aus und sage, dass Sie Folgendes verwenden können text-align: center:

http://jsfiddle.net/pMxty/

Flexbox verwenden

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

Und dann fügen Sie die Klasse zu Ihrer Schaltfläche hinzu.

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

Sie sollten es hier einfach angehen lassen:

Zuerst haben Sie die Anfangsposition Ihres Textes oder Ihrer Schaltfläche:

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

Durch Hinzufügen dieser CSS-Codezeile zum h2- Tag oder zum div- Tag, das das Button-Tag enthält

Stil: "Textausrichtung: Mitte;"

Endlich Der Ergebniscode lautet:

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

Ich stieß auf diesem und dachte , dass ich die Lösung , die ich als gut verlassen würde, die verwendet line-heightund text-align: centersowohl vertikale als auch horizontale Zentrierung zu tun:

Klicken Sie hier, um JSFiddle zu bearbeiten

Um eine <button type = "button">sowohl vertikal als auch horizontal innerhalb einer <div>Breite zu zentrieren, die wie in Ihrem Fall dynamisch berechnet wird, gehen Sie wie folgt vor:

1. Auf text-align: center;Umbruch setzen <div>: Hiermit wird die Schaltfläche zentriert, wenn Sie die Größe <div>des Fensters (oder besser gesagt des Fensters) ändern.

2. Für die vertikale Ausrichtung müssen Sie margin: valuepx;die Schaltfläche festlegen . Dies ist die Regel für die Berechnung valuepx:

   valuepx = (wrappingDIVheight - buttonHeight)/2

Hier ist eine JS Bin-Demo .

Eine supereinfache Antwort, die in den meisten Fällen gilt, besteht darin, den Rand auf 0 autound die Anzeige auf einzustellen block. Sie können sehen, wie ich meine Schaltfläche in meiner Demo auf CodePen zentriert habe

Am einfachsten ist es, es als "div" einzugeben. Geben Sie ihm einen "Rand: 0 auto". Wenn Sie jedoch möchten, dass es zentriert wird, müssen Sie ihm eine Breite geben

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

Responsive CSS-Option zum vertikalen und horizontalen Zentrieren einer Schaltfläche, ohne sich um die Größe des übergeordneten Elements zu kümmern (Verwendung von Datenattribut-Hooks aus Gründen der Klarheit und Trennung) :

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

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

Reaktionsschnelle Möglichkeit, Ihren Button in einem Div zu zentrieren:

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

Angenommen, div ist #div und die Schaltfläche ist #button:

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

#button {}

Verschachteln Sie dann den Button wie gewohnt in div.