Wie man ein Element horizontal zentriert

Question

Wie kann ich eine horizontale Zentrierung einer <div> in einem anderen <div> CSS verwenden?

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Answer 1

Nun, es ist mir gelungen, eine Lösung zu finden, die vielleicht für alle Situationen geeignet ist, aber JavaScript verwendet:

Hier ist die Struktur:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

Und hier ist der JavaScript-Schnipsel:

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Wenn Sie es in einem responsiven Ansatz verwenden möchten, können Sie Folgendes hinzufügen:

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Answer 2

Versuchen Sie es mit

margin: 0 auto;

Wenn Sie Ihren Text auch zentrieren möchten, versuchen Sie es mit:

text-align: center;

Answer 3

Wir können verwenden Flexbox um dies ganz einfach zu erreichen:

<div id="outer">
    <div id="inner">Foo foo</div>
</div>

Zentrieren eines Divs innerhalb eines Divs Horizontal :

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

Zentrieren eines Divs innerhalb eines Divs vertikal :

#outer {
    display: flex;
    align-items: center;
}

Und, um das Div vertikal und horizontal vollständig zu zentrieren:

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

Answer 4

Fügen Sie einfach diesen CSS-Inhalt in Ihre CSS-Datei ein. Es wird den Inhalt automatisch zentrieren.

Horizontal zentriert ausrichten in CSS:

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

Vertikal ausrichten + horizontal zentrieren in CSS:

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

Answer 5

Wenn jemand möchte eine jQuery-Lösung für Zentrum ausrichten diese divs:

$(window).bind("load", function() {
    var wwidth = $("#outer").width();
    var width = $('#inner').width();
    $('#inner').attr("style", "padding-left: " + wwidth / 2 + "px; margin-left: -" + width / 2 + "px;");
});