Wie kann ich einen <div>
mit CSS horizontal in einem anderen <div>
zentrieren?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Sie können dieses CSS auf den inneren <div>
anwenden:
#inner {
width: 50%;
margin: 0 auto;
}
Natürlich müssen Sie width
nicht auf 50%
setzen. Jede Breite, die unter dem <div>
liegt, funktioniert. Der margin: 0 auto
ist die eigentliche Zentrierung.
Wenn Sie auf IE8 + abzielen, ist es möglicherweise besser, stattdessen Folgendes zu verwenden:
#inner {
display: table;
margin: 0 auto;
}
Dadurch wird das innere Element horizontal zentriert und es kann keine bestimmte width
Einstellung vorgenommen werden.
Arbeitsbeispiel hier:
#inner {
display: table;
margin: 0 auto;
}
<div id="outer" style="width:100%">
<div id="inner">Foo foo</div>
</div>
Wenn Sie keine feste Breite für das innere div
festlegen möchten, können Sie Folgendes tun:
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Dadurch wird das innere div
zu einem Inline-Element, das mit text-align
zentriert werden kann.
Die besten Ansätze sind mit CSS 3 .
#outer{
width: 100%;
/* Firefox */
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Safari and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* W3C */
display: box;
box-pack: center;
box-align: center;
}
#inner{
width: 50%;
}
Je nach Verwendbarkeit können Sie auch die box-orient, box-flex, box-direction
-Eigenschaften verwenden.
Biegen:
#outer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
Und dies erklärt, warum das Boxmodell der beste Ansatz ist:
Angenommen, Ihr Div ist 200px
breit:
.centered {
position: absolute;
left: 50%;
margin-left: -100px;
}
Stellen Sie sicher, dass das übergeordnete Element positioniert d. H. Relativ, fest, absolut oder klebrig ist.
Wenn Sie die Breite Ihres div nicht kennen, können Sie transform:translateX(-50%);
anstelle des negativen Randes verwenden.
Ich habe dieses example erstellt, um zu zeigen, wie vertikal und horizontalalign
.
Code ist im Grunde Folgendes:
#outer {
position: relative;
}
und...
#inner {
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
}
und es bleibt in der center
, auch wenn Sie Größe ändern Ihren Bildschirm _.
In einigen Postern wurde die CSS 3-Methode zum Zentrieren mit display:box
erwähnt.
Diese Syntax ist veraltet und sollte nicht mehr verwendet werden. [Siehe auch diesen Beitrag) .
Der Vollständigkeit halber sei hier der neueste Weg angegeben, in CSS 3 mit FLEXIBLE BOX LAYOUT MODULE zu zentrieren.
Wenn Sie also ein einfaches Markup haben:
<div class="box">
<div class="item1">A</div>
<div class="item2">B</div>
<div class="item3">C</div>
</div>
... und Sie möchten Ihre Artikel in der Box zentrieren. Folgendes benötigen Sie für das übergeordnete Element (.box):
.box {
display: flex;
flex-wrap: wrap; /* Optional. only if you want the items to wrap */
justify-content: center; /* For horizontal alignment */
align-items: center; /* For vertical alignment */
}
.box {
display: flex;
flex-wrap: wrap;
/* Optional. only if you want the items to wrap */
justify-content: center;
/* For horizontal alignment */
align-items: center;
/* For vertical alignment */
}
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.box {
height: 200px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border: 2px solid tomato;
}
.box div {
margin: 0 10px;
width: 100px;
}
.item1 {
height: 50px;
background: pink;
}
.item2 {
background: brown;
height: 100px;
}
.item3 {
height: 150px;
background: orange;
}
<div class="box">
<div class="item1">A</div>
<div class="item2">B</div>
<div class="item3">C</div>
</div>
Wenn Sie ältere Browser unterstützen möchten, die eine ältere Syntax für Flexbox verwenden, ist hier ein guter Ort zum Suchen.
Wenn Sie keine feste Breite festlegen möchten und keinen zusätzlichen Rand wünschen, fügen Sie Ihrem Element display: inline-block
hinzu.
Sie können verwenden:
#element {
display: table;
margin: 0 auto;
}
#outer {
width:100%;
height:100%;
display:box;
box-orient:horizontal;
box-pack:center;
box-align:center;
}
Es kann nicht zentriert werden, wenn Sie ihm keine Breite zuweisen. Andernfalls wird standardmäßig der gesamte horizontale Abstand verwendet.
Setzen Sie die Variable width
und setzen Sie margin-left
und margin-right
auf auto
. Das ist nur für die Horizontale . Wenn Sie beide Wege wollen, tun Sie es einfach in beide Richtungen. Hab keine Angst zu experimentieren; Es ist nicht so, als würden Sie etwas kaputt machen.
Horizontal und vertikal. Es funktioniert mit einigermaßen modernen Browsern (Firefox, Safari/WebKit, Chrome, Internet Explorer 10, Opera usw.).
.content {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>
Ich musste vor kurzem ein "verstecktes" div (dh display: none;) zentrieren, das ein eingebettetes Formular enthielt, das auf der Seite zentriert werden musste. Ich habe folgendes jQuery geschrieben, um das versteckte div anzuzeigen und das CSS auf die automatisch generierte Breite der Tabelle zu aktualisieren und den Rand so zu ändern, dass er zentriert wird. (Das Umschalten der Anzeige wird durch Klicken auf einen Link ausgelöst, aber es war nicht erforderlich, diesen Code anzuzeigen.)
HINWEIS: Ich teile diesen Code, weil Google mich zu dieser Stack Overflow-Lösung gebracht hat und alles funktioniert hätte, außer dass ausgeblendete Elemente keine Breite haben und erst nach ihrer Anzeige in der Größe/Mitte zentriert werden können.
$(function(){
$('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
<form action="">
<table id="innerTable">
<tr><td>Name:</td><td><input type="text"></td></tr>
<tr><td>Email:</td><td><input type="text"></td></tr>
<tr><td>Email:</td><td><input type="submit"></td></tr>
</table>
</form>
</div>
Die Art, wie ich es normalerweise tue, ist die absolute Position:
#inner{
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
}
Das äußere Div benötigt keine zusätzlichen Eigenschaften, damit dies funktioniert.
Für Firefox und Chrome:
<div style="width:100%;">
<div style="width: 50%; margin: 0px auto;">Text</div>
</div>
Für Internet Explorer, Firefox und Chrome:
<div style="width:100%; text-align:center;">
<div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>
Die text-align:
-Eigenschaft ist für moderne Browser optional, im Internet Explorer-Quirks-Modus ist jedoch die Unterstützung älterer Browser erforderlich.
Das ist meine Antwort.
#outerDiv {
width: 500px;
}
#innerDiv {
width: 200px;
margin: 0 auto;
}
<div id="outerDiv">
<div id="innerDiv">Inner Content</div>
</div>
Eine andere Lösung hierfür ist, ohne dass für eines der Elemente eine Breite festgelegt werden muss, das CSS-Attribut transform
.
#outer {
position: relative;
}
#inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Der Trick ist, dass translateX(-50%)
das #inner
-Element 50% links von seiner eigenen Breite setzt. Sie können denselben Trick für die vertikale Ausrichtung verwenden.
Hier ist ein Fiddle , das die horizontale und vertikale Ausrichtung zeigt.
Weitere Informationen finden Sie unter Mozilla Developer Network .
Chris Coyier, der in seinem Blog ein ausgezeichneter Beitrag zum Thema 'Zentrieren im Unbekannten' geschrieben hat. Es ist eine Zusammenfassung mehrerer Lösungen. Ich habe einen gepostet, der in dieser Frage nicht veröffentlicht wurde. Es bietet mehr Browser-Unterstützung als die Flexbox-Lösung, und Sie verwenden display: table;
nicht, was andere Dinge beschädigen könnte.
/* This parent can be any width and height */
.outer {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.outer:before {
content: '.';
display: inline-block;
height: 100%;
vertical-align: middle;
width:0;
overflow:hidden;
}
/* The element to be centered, can
also be of any width and height */
.inner {
display: inline-block;
vertical-align: middle;
width: 300px;
}
Mir ist klar, dass ich ziemlich spät dran bin, aber dies ist eine sehr beliebte Frage, und ich habe vor kurzem einen Ansatz gefunden, den ich hier nirgendwo erwähnt habe, also dachte ich, ich würde ihn dokumentieren.
#outer {
position: absolute;
left: 50%;
}
#inner {
position: relative;
left: -50%;
}
BEARBEITEN: Beide Elemente müssen dieselbe Breite haben, damit sie korrekt funktionieren.
Siehe beispielsweise this link und den folgenden Ausschnitt:
div#outer {
height: 120px;
background-color: red;
}
div#inner {
width: 50%;
height: 100%;
background-color: green;
margin: 0 auto;
text-align: center; /* For text alignment to center horizontally. */
line-height: 120px; /* For text alignment to center vertically. */
}
<div id="outer" style="width:100%;">
<div id="inner">Foo foo</div>
</div>
Wenn Sie viele Kinder unter einem übergeordneten Element haben, muss Ihr CSS-Inhalt wie dieses -Beispiel bei Fiddle sein.
Der HTML-Inhalt sieht so aus:
<div id="outer" style="width:100%;">
<div class="inner"> Foo Text </div>
<div class="inner"> Foo Text </div>
<div class="inner"> Foo Text </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> Foo Text </div>
</div>
Dann sehen Sie dieses Beispiel auf der Geige .
Der einfachste Weg:
#outer {
width: 100%;
text-align: center;
}
#inner {
margin: auto;
width: 200px;
}
<div id="outer">
<div id="inner">Blabla</div>
</div>
Nach meiner Erfahrung ist es am besten, eine Box horizontal zu zentrieren, indem Sie die folgenden Eigenschaften anwenden:
text-align: center;
habendisplay: inline-block;
haben.container {
width: 100%;
height: 120px;
background: #CCC;
text-align: center;
}
.centered-content {
display: inline-block;
background: #FFF;
padding: 20px;
border: 1px solid #000;
}
<div class="container">
<div class="centered-content">
Center this!
</div>
</div>
Siehe auch this Fiddle !
Nach meiner Erfahrung ist es am besten, eine Box sowohl vertikal als auch horizontal zu zentrieren, einen zusätzlichen Container zu verwenden und die folgenden Eigenschaften anzuwenden:
display: table;
habendisplay: table-cell;
habenvertical-align: middle;
habentext-align: center;
habendisplay: inline-block;
haben.outer-container {
display: table;
width: 100%;
height: 120px;
background: #CCC;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
background: #FFF;
padding: 20px;
border: 1px solid #000;
}
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Center this!
</div>
</div>
</div>
Siehe auch this Fiddle !
Hier ist, was Sie auf kürzestem Weg wünschen.
#outer {
margin - top: 100 px;
height: 500 px; /* you can set whatever you want */
border: 1 px solid# ccc;
}
#inner {
border: 1 px solid# f00;
position: relative;
top: 50 % ;
transform: translateY(-50 % );
}
Sie können so etwas tun
#container {
display: table;
width: <width of your container>;
height: <height of your container>;
}
#inner {
width: <width of your center div>;
display: table-cell;
margin: 0 auto;
text-align: center;
vertical-align: middle;
}
Dadurch wird auch der #inner
vertikal ausgerichtet. Wenn Sie dies nicht möchten, entfernen Sie die Eigenschaften display
und vertical-align
.
Wenn die Breite des Inhalts unbekannt ist, können Sie die folgende Methode verwenden . Angenommen, wir haben diese zwei Elemente:
.outer
- volle Breite.inner
- keine Breite gesetzt (aber eine maximale Breite könnte angegeben werden)Angenommen, die berechnete Breite der Elemente beträgt 1000px bzw. 300px. Gehen Sie wie folgt vor:
.inner
in .center-helper
.center-helper
zu einem Inline-Block machen; es hat die gleiche Größe wie .inner
und macht es 300px breit..center-helper
50% rechts von seinem übergeordneten Element drücken; Dies setzt seine Linke auf 500px wrt. äußere..inner
50% relativ zu seinem übergeordneten Element drücken; Damit wird seine Linke auf -150px bezogen. Der mittlere Helfer bedeutet, dass er links bei 500 - 150 = 350px steht. äußere..outer
auf ausgeblendet, um eine horizontale Bildlaufleiste zu verhindern.Demo:
body {
font: medium sans-serif;
}
.outer {
overflow: hidden;
background-color: papayawhip;
}
.center-helper {
display: inline-block;
position: relative;
left: 50%;
background-color: burlywood;
}
.inner {
display: inline-block;
position: relative;
left: -50%;
background-color: wheat;
}
<div class="outer">
<div class="center-helper">
<div class="inner">
<h1>A div with no defined width</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Duis condimentum sem non turpis consectetur blandit.<br>
Donec dictum risus id orci ornare tempor.<br>
Proin pharetra augue a lorem elementum molestie.<br>
Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
</div>
</div>
</div>
.outer {
overflow: hidden;
}
.center-helper {
float: left;
position: relative;
left: 50%;
}
.inner {
float: left;
position: relative;
left: -50%;
}
Durch Anwenden von text-align: center
werden die Inline-Inhalte innerhalb des Zeilenfelds zentriert. Da das innere div jedoch standardmäßig width: 100%
hat, müssen Sie eine bestimmte Breite festlegen oder eine der folgenden Optionen verwenden:
#inner {
display: inline-block;
}
#outer {
text-align: center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Die Verwendung von margin: 0 auto
ist eine weitere Option und eignet sich eher für die Kompatibilität älterer Browser. Es arbeitet zusammen mit display: table
.
#inner {
display: table;
margin: 0 auto;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
display: flex
verhält sich wie ein Blockelement und ordnet seinen Inhalt gemäß dem Flexbox-Modell ein. Es funktioniert mit justify-content: center
.
Bitte beachten Sie: Flexbox ist mit den meisten Browsern kompatibel, jedoch nicht mit allen. Unter here finden Sie eine vollständige und aktuelle Liste der Browserkompatibilität.
#inner {
display: inline-block;
}
#outer {
display: flex;
justify-content: center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Mit transform: translate
können Sie den Koordinatenraum des visuellen CSS-Formatierungsmodells ändern. Damit können Elemente übersetzt, gedreht, skaliert und verzerrt werden. Zum horizontalen Zentrieren sind position: absolute
und left: 50%
erforderlich.
#inner {
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
<center>
(veraltet)Das Tag <center>
ist die HTML-Alternative zu text-align: center
. Es funktioniert mit älteren und den meisten neuen Browsern, wird jedoch nicht als bewährte Methode angesehen, da diese Funktion veraltet ist und aus den Webstandards entfernt wurde.
#inner {
display: inline-block;
}
<div id="outer">
<center>
<div id="inner">Foo foo</div>
</center>
</div>
Nun, ich habe eine Lösung gefunden, 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-Ausschnitt:
$(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);
})
});
Sie können display: flex
für Ihr äußeres Div verwenden, und um horizontal zu zentrieren, müssen Sie justify-content: center
#outer{
display: flex;
justify-content: center;
}
oder besuchen Sie w3schools - CSS flex Property für weitere Ideen.
Es gab eine Option, die ich gefunden habe:
Jeder sagt zu benutzen:
margin: auto 0;
Es gibt aber noch eine andere Möglichkeit. Legen Sie diese Eigenschaft für das übergeordnete div fest. Es funktioniert jederzeit perfekt:
text-align: center;
Und sehen Sie, Kind gehen Zentrum.
Und zum Schluss CSS für Sie:
#outer{
text-align: center;
display: block; /* Or inline-block - base on your need */
}
#inner
{
position: relative;
margin: 0 auto; /* It is good to be */
}
Flex bietet mehr als 97% Browser-Support und kann der beste Weg sein, um diese Art von Problemen in wenigen Zeilen zu lösen:
#outer {
display: flex;
justify-content: center;
}
Diese Methode funktioniert auch gut:
div.container {
display: flex;
justify-content: center; /* for horizontal alignment */
align-items: center; /* for vertical alignment */
}
Für den inneren <div>
ist die einzige Bedingung, dass height
und width
nicht größer sein dürfen als die des Containers.
Versuchen Sie, mit herumzuspielen
margin: 0 auto;
Wenn Sie Ihren Text auch zentrieren möchten, versuchen Sie es mit:
text-align: center;
Wenn jemand eine jQuery-Lösung für Center-Ausrichtung haben möchte, richten Sie diese Divs aus
$(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;");
});
du kannst einfach flexbox wie folgt benutzen:
#outer {
display: flex;
justify-content: center
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Wenden Sie Autoprefixer für die gesamte Browserunterstützung an:
#outer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
benutze transformiere :
#inner {
position: absolute;
left: 50%;
transform: translate(-50%)
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
mit Autoprefixer:
#inner {
position: absolute;
left: 50%;
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
transform: translate(-50%)
}
CSS 3:
Sie können den folgenden Stil für den übergeordneten Container verwenden, um untergeordnete Elemente gleichmäßig horizontal zu verteilen:
display: flex;
justify-content: space-between; // <-- space-between or space-around
Ein schönes DEMO zu den verschiedenen Werten für justify-content
.
CanIUse: Browser-Kompatibilität
Versuch es!:
#containerdiv {
display: flex;
justify-content: space-between;
}
#containerdiv > div {
background-color: blue;
width: 50px;
color: white;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="containerdiv">
<div>88</div>
<div>77</div>
<div>55</div>
<div>33</div>
<div>40</div>
<div>45</div>
</div>
</body>
</html>
Ich habe Inline-Stil auf innere div angewendet. Verwende das hier.
<div id="outer" style="width:100%">
<div id="inner" style="display:table;margin:0 auto;">Foo foo</div>
</div>
#inner {
width: 50%;
margin: 0 auto;
}
Dies erreichen Sie mit der CSS Flexbox. Sie müssen nur drei Eigenschaften auf das übergeordnete Element anwenden, damit alles funktioniert.
#outer {
display: flex;
align-content: center;
justify-content: center;
}
Schauen Sie sich den Code unten an, damit Sie die Eigenschaften besser verstehen können.
Erfahren Sie mehr über CSS Flexbox
#outer {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ddd;
width: 100%;
height: 200px;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Eine nette Sache, die ich kürzlich gefunden habe, indem ich die Verwendung von line-height
+ vertical-align
und dem 50%
-Linkstrick mischte, können Sie center
eine dynamisch große Box in einer anderen dynamisch großen Box sowohl horizontal als auch vertikal mit reinem CSS verwenden.
Beachten Sie, dass Sie Spannweiten (und inline-block
) verwenden müssen, die in modernen Browsern + IE8 .HTML getestet wurden:
<h1>Center dynamic box using only css test</h1>
<div class="container">
<div class="center">
<div class="center-container">
<span class="dyn-box">
<div class="dyn-head">This is a head</div>
<div class="dyn-body">
This is a body<br />
Content<br />
Content<br />
Content<br />
Content<br />
</div>
</span>
</div>
</div>
</div>
CSS:
.container
{
position:absolute;
left:0;right:0;top:0;bottom:0;
overflow:hidden;
}
.center
{
position:absolute;
left:50%; top:50%;
}
.center-container
{
position:absolute;
left:-2500px;top:-2500px;
width:5000px;height:5000px;
line-height:5000px;
text-align:center;
overflow: hidden;
}
.dyn-box
{
display: inline-block;
vertical-align: middle;
line-height: 100%;
/* Purely asthetic below this point */
background: #808080;
padding: 13px;
border-radius: 11px;
font-family: arial;
}
.dyn-head
{
background:red;
color:white;
min-width: 300px;
padding: 20px;
font-size: 23px;
}
.dyn-body
{
padding: 10px;
background:white;
color:red;
}
Wie wäre es mit dem untenstehenden CSS für #inner
div:
#inner {
width: 50%;
margin-left: 25%;
}
Ich verwende dieses CSS meistens, um divs zu zentrieren.
.outer {
display: -webkit-flex;
display: flex;
//-webkit-justify-content: center;
//justify-content: center;
//align-items: center;
width: 100%;
height: 100px;
background-color: lightgrey;
}
.inner {
background-color: cornflowerblue;
padding: 2rem;
margin: auto;
//align-self: center;
}
<div class="outer">
<div class="inner">Foo foo</div>
</div>
Mach es einfach!
#outer {
display: flex;
justify-content: center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Ich benutze nur die einfachste Lösung, aber sie funktioniert in allen Browsern:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>center a div within a div?</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer{
width: 80%;
height: 500px;
background-color: #003;
margin: 0 auto;
}
#outer p{
color: #FFF;
text-align: center;
}
#inner{
background-color: #901;
width: 50%;
height: 100px;
margin: 0 auto;
}
#inner p{
color: #FFF;
text-align: center;
}
</style>
</head>
<body>
<div id="outer"><p>this is the outer div</p>
<div id="inner">
<p>this is the inner div</p>
</div>
</div>
</body>
</html>
Benutzen:
<div id="parent">
<div class="child"></div>
</div>
Stil:
#parent {
display: flex;
justify-content: center;
}
Wenn Sie es horizontal zentrieren möchten, sollten Sie Folgendes schreiben:
#parent {
display: flex;
justify-content: center;
align-items: center;
}
Es ist möglich mit CSS 3 flexbox . Sie haben zwei Methoden, wenn Sie die Flexbox verwenden.
display:flex;
fest und fügen Sie dem übergeordneten Element die Eigenschaften {justify-content:center; ,align-items:center;}
hinzu.#outer{
display: flex;
justify-content: center;
align-items: center;
}
<div id="outer" style="width:100%">
<div id="inner">Foo foo</div>
</div>
display:flex
fest und fügen Sie margin:auto;
dem untergeordneten Element hinzu.#outer{
display: flex;
}
#inner{
margin: auto;
}
<div id="outer" style="width:100%">
<div id="inner">Foo foo</div>
</div>
Es kann auch horizontal und vertikal mittels absoluter Positionierung zentriert werden:
#outer{
position: relative;
}
#inner{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
Sie können die Flexbox verwenden.
#inner {
display: flex;
justify-content: center;
}
Mehr dazu erfahren Sie unter diesem Link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Ich wollte darauf antworten, da ich bemerkte, dass niemand die Berechnungsmethode erwähnte. Die Verwendung bezieht sich auf das Div, das Sie zentrieren. Wenn Sie die Breite kennen, sagen wir, es sind 1200 Pixel, wählen Sie:
.container {
width:1200px;
margin-left: calc(50% - 600px);
}
Im Grunde wird also ein linker Rand von 50% minus der Hälfte der bekannten Breite hinzugefügt.
Der bekannteste Weg, der allgemein verwendet wird und in vielen Browsern den alten verwendet wird, ist margin
wie folgt:
#parent {
width: 100%;
background-color: #cccccc;
}
#child {
width: 30%; /*we need the width*/
margin: 0 auto; /*this does the magic*/
color: #ffffff;
background-color: #000000;
padding: 10px;
text-align: center;
}
<div id="parent">
<div id="child">I'm the child and I'm horizontally centered! My daddy is a greyish div dude!</div>
</div>
Führen Sie den Code aus, um zu sehen, wie er funktioniert. Außerdem gibt es zwei wichtige Dinge, die Sie in Ihrem CSS nicht vergessen sollten, wenn Sie versuchen, auf diese Weise zu zentrieren: margin: 0 auto;
, die es zum Div-Zentrum machen, wie gewünscht, und nicht width
des Kindes vergessen , sonst wird es nicht wie erwartet zentriert!
Wir können FLEXBOX verwenden, um dies ganz einfach zu erreichen:
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Zentrieren Sie ein Div in einem Div.
#outer {
display: flex;
justify-content: center;
}
Zentrieren Sie ein Div in einem Div. 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;
}
Hoffe, es war hilfreich für einige auf Sie. Viel Spaß beim Codieren!
.outer
{
background-color: rgb(230,230,255);
width 100%;
height: 50px;
}
.inner
{
background-color: rgb(200,200,255);
width: 50%;
height: 50px;
margin: 0 auto;
}
<div class="outer">
<div class="inner">
margin 0 auto
</div>
</div>
Da diese Frage immer noch viele Treffer hat, ist es eine sehr einfache und Cross-Browser-Antwort auf die horizontale Mitte, diese Regel auf das übergeordnete Element anzuwenden:
.parentBox {
display: flex;
justify-content: center
}
Hier ist eine weitere Möglichkeit zum horizontalen Zentrieren mit flexbox und ohne Angabe der Breite des Innenbehälters. Die Idee ist, Pseudo-Elemente zu verwenden, die den inneren Inhalt von rechts und links verschieben.
Wenn Sie flex:1
für ein Pseudoelement verwenden, werden sie die verbleibenden Leerzeichen mit gleicher Größe füllen und der innere Container wird zentriert.
.container {
display: flex;
border: 1px solid;
}
.container:before,
.container:after {
content: "";
flex: 1;
}
.inner {
border: 1px solid red;
padding: 5px;
}
<div class="container">
<div class="inner">
Foo content
</div>
</div>
Wir können dieselbe Situation auch für die vertikale Ausrichtung berücksichtigen, indem Sie einfach die Richtung der Biegung zur Säule ändern:
.container {
display: flex;
flex-direction: column;
border: 1px solid;
min-height: 200px;
}
.container:before,
.container:after {
content: "";
flex: 1;
}
.inner {
border: 1px solid red;
padding: 5px;
}
<div class="container">
<div class="inner">
Foo content
</div>
</div>
Dies zentriert Ihre innere Div horizontal und vertikal:
#outer{
display: flex;
}
#inner{
margin: auto;
}
Ändern Sie nur das horizontale Ausrichten
margin: 0 auto;
und für vertikal ändern
margin: auto 0;
CSS
#inner {
display: table;
margin: 0 auto;
}
HTML
<div id="outer" style="width:100%">
<div id="inner">Foo foo</div>
</div>
Nachdem ich alle Antworten gelesen hatte, sah ich nicht die, die mir lieber war. So können Sie ein Element in einem anderen zentrieren.
jsfiddle - http://jsfiddle.net/josephtveter/w3sksu1w/
<p>Horz Center</p>
<div class="outterDiv">
<div class="innerDiv horzCenter"></div>
</div>
<p>Vert Center</p>
<div class="outterDiv">
<div class="innerDiv vertCenter"></div>
</div>
<p>True Center</p>
<div class="outterDiv">
<div class="innerDiv trueCenter"></div>
</div>
.vertCenter
{
position: absolute;
top:50%;
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.horzCenter
{
position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.trueCenter
{
position: absolute;
left: 50%;
top: 50%;
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.outterDiv
{
position: relative;
background-color: blue;
width: 10rem;
height: 10rem;
margin: 2rem;
}
.innerDiv
{
background-color: red;
width: 5rem;
height: 5rem;
}
Sie können diesen Code hinzufügen:
#inner {
width: 90%;
margin: 0 auto;
text-align:center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Abhängig von Ihren Umständen könnte die einfachste Lösung sein:
margin:0 auto; float:none;
Einfachste Antwort add margin: auto; nach innen.
<div class="outer">
<div class="inner">
Foo foo
</div>
</div>
cSS-Code
.outer{ width:100%; height:300px; background:yellow;}
.inner{width:30%; height:200px; margin:auto; background:red; text-align:center}
Überprüfen Sie meinen Codepen-Link http://codepen.io/feizel/pen/QdJJrK
Geben Sie dem inneren width
etwas div
und fügen Sie in der CSS-Eigenschaft margin:0 auto;
hinzu.
Benutzen:
<style>
#outer{
text-align: center;
width: 100%;
}
#inner{
text-align: center;
}
</style>
Ja, das ist ein kurzer und sauberer Code für das horizontale Ausrichten. Ich hoffe, Ihnen gefällt dieser Code.
.classname {
display: box;
margin: 0 auto;
width: 500px /* Width set as per your requirement. */;
}
Verwenden Sie den folgenden Code.
<div id="outer">
<div id="inner">Foo foo</div>
</div>
#outer {
text-align: center;
}
#inner{
display: inline-block;
}
Ich weiß, dass ich mit der Beantwortung dieser Frage ein bisschen zu spät bin, und ich habe mich nicht die Mühe gemacht, jede einzelne Antwort zu lesen, daher kann dies ein Duplikat sein . Hier ist meine Einstellung :
inner { width: 50%; background-color: Khaki; margin: 0 auto; }
Verwenden Sie diesen Code:
<div id="outer">
<div id="inner">Foo foo</div>
</div>
#inner {
width: 50%;
margin: 0 auto;
text-align: center;
}
Sie können es mit der Flex-Box kaufen, die heutzutage eine gute Technik ist. Für die Verwendung der Flex-Box sollten Sie display: flex;
und align-items: center;
Ihrem übergeordneten Element oder #outer
div-Element geben. Der Code sollte so aussehen:
#outer {
display: flex;
align-items: center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Dies sollte Ihr Kind oder #inner
div horizontal zentrieren. Sie können jedoch keine Änderungen sehen. Da unser #outer
div keine Höhe oder mit anderen Worten hat, wird seine Höhe auf auto gesetzt, sodass es dieselbe Höhe wie alle untergeordneten Elemente hat. Nach ein wenig visuellem Styling sollte der Ergebniscode folgendermaßen aussehen:
#outer {
height: 500px;
display: flex;
align-items: center;
background-color: blue;
}
#inner {
height: 100px;
background: yellow;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Sie können sehen, dass #inner
div jetzt zentriert ist. Flex-Box ist die neue Methode zum Positionieren von Elementen in horizontalen oder vertikalen Stapeln mit CSS. Die Kompatibilität mit globalen Browsern beträgt 96%. Sie können es also frei verwenden. Wenn Sie mehr über Flex-Box erfahren möchten, besuchen Sie CSS-Tricks , dann ist dies meiner Meinung nach der beste Ort, um Flex-Box zu lernen.
<div id="outer" style="width:100%;margin: 0 auto; text-align: center;">
<div id="inner">Foo foo</div>
</div>
Es ist so einfach.
Entscheiden Sie einfach, welche Breite Sie dem inneren div zuweisen möchten, und verwenden Sie das folgende CSS.
.inner{
width: 500px; // Assumed width
margin: 0 auto;
}
Dies wird Ihren #inner
sicher sowohl horizontal als auch vertikal zentrieren. Dies ist auch in allen Browsern kompatibel. Ich habe nur extra Styling hinzugefügt, nur um zu zeigen, wie es zentriert ist.
#outer {
background: black;
position: relative;
width:150px;
height:150px;
}
#inner {
background:white;
position: absolute;
left:50%;
top: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Wenn Sie es jedoch nur horizontal ausrichten möchten, kann dies Ihnen helfen.
#outer {
background: black;
position: relative;
width:150px;
height:150px;
}
#inner {
background:white;
position: absolute;
left:50%;
transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
-moz-transform: translate(-50%,0);
-o-transform: translate(-50%,0);
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Sie können nur eine Codezeile verwenden, nämlich text-align:center
.
Hier ist ein Beispiel:
#inner {
text-align:center;
}
<div id="outer" style="width:100%">
<div id="inner"><button>hello</button></div>
</div>
Eine der einfachsten Möglichkeiten ist, display: flex
zu verwenden. Das äußere Div muss nur eine Anzeige-Flex haben, und das innere muss margin: 0 auto
sein, um es horizontal zu zentrieren.
Um vertikal zu zentrieren und nur ein div innerhalb eines anderen div zu zentrieren, sehen Sie sich die Kommentare der .inner-Klasse unten an
.wrapper {
display: flex;
/* Adding whatever height & width we want */
height: 300px;
width: 300px;
/* Just so you can see it is centered */
background: peachpuff;
}
.inner {
/* center horizontally */
margin: 0 auto;
/* center vertically */
/* margin: auto 0; */
/* center */
/* margin: 0 auto; */
}
<div class="wrapper">
<div class="inner">
I am horizontally!
</div>
</div>
#outer {postion: relative}
#inner {
width: 100px;
height: 40px;
position: absolute;
top: 50%;
margin-top:-20px; /* Half of your Height */
}
Einer der einfachsten Wege ...
<!DOCTYPE html>
<html>
<head>
<style>
#outer-div {
width: 100%;
text-align: center;
background-color: #000
}
#inner-div {
display: inline-block;
margin: 0 auto;
padding: 3px;
background-color: #888
}
</style>
</head>
<body>
<div id ="outer-div" width="100%">
<div id ="inner-div"> I am a easy horizontally centered div.</div>
<div>
</body>
</html>
Es tut mir leid, aber dieses Baby aus den 1990er Jahren hat gerade für mich ARBEITET:
<div id="outer">
<center>Foo foo</center>
</div>
Bin ich wegen dieser Sünde zur Hölle?
Das Beste, was ich in meinen verschiedenen Projekten verwendet habe, ist
<div class="outer">
<div class="inner"></div>
</div>
.outer{
width: 500px;
height: 500px;
position: relative;
background: yellow;
}
.inner{
width: 100px;
height: 100px;
background:red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Wir könnten die nächste CSS-Klasse verwenden, die die vertikale und horizontale Zentrierung jedes Elements gegen das übergeordnete Element zulässt:
.centerElement{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
HTML:
<div id="outer">
<div id="inner">
</div>
</div>
CSS:
#outer{
width: 500px;
background-color: #000;
height: 500px
}
#inner{
background-color: #333;
margin: 0 auto;
width: 50%;
height: 250px;
}
Fiddle .
Am besten verwenden Sie eine Tabellenzellendarstellung (inner), die genau nach einem div mit der Anzeigetabelle (außen) kommt und die vertikale Ausrichtung für das innere div (mit Tabellenzellendarstellung) und jedes Tag, das Sie im inneren div verwenden, festlegen in der Mitte von div oder page.
Hinweis: Sie müssen eine angegebene Höhe auf die äußere Höhe setzen
Dies ist der beste Weg, den Sie ohne relative oder absolute Position kennen, und Sie können ihn in jedem Browser als gleich verwenden.
#outer{
display: table;
height: 100vh;
width: 100%;
}
#inner{
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div id="outer">
<div id="inner">
<h1>
set content center
</h1>
<div>
hi this is the best way to align your items center
</div>
</div>
</div>
Anstelle mehrerer Wrapper und/oder automatischer Ränder funktioniert diese einfache Lösung für mich:
<div style="top:50%; left:50%;
height:100px; width:100px;
margin-top:-50px; margin-left:-50px;
background:url('lib/loading.gif') no-repeat center #fff;
text-align:center;
position:fixed; z-index:9002;">Loading...</div>
Dadurch wird das div in die Mitte der Ansicht (vertikal und horizontal) gestellt, die Größe wird angepasst und die Größe wird eingestellt, das Hintergrundbild (vertikal und horizontal) wird zentriert, der Text wird zentriert (horizontal), und div wird in der Ansicht und über dem Inhalt beibehalten. Einfach in das HTML body
einfügen und genießen.
Probieren Sie es aus:
#outer{
display: inline-block;
height: 100%;
vertical-align: middle;
}
#outer > #inner{
display: inline-block;
font-size: 19px;
margin: 20px;
max-width: 320px;
min-height: 20px;
min-width: 30px;
padding: 14px;
vertical-align: middle;
}
das hat für mich funktioniert:
#inner {
position: absolute;
margin: 0 auto;
left: 0;
width: 7%;
right: 0;
}
In diesem Code bestimmen Sie die Elementbreite.
Ähnliches finde ich mit margin-left
, kann aber auch left
sein.
#inner{
width: 100%;
max-width: 65px; /*to adapt to screen width. Can be whatever you want*/
left: 65px; /*this has to be approximately the same as the max-width*/
}
Sie können ein weiteres Div mit der gleichen Größe von #inner hinzufügen und es um -50% (die Hälfte der Breite von #inner) und #inner um 50% nach links verschieben. Entschuldigung für mein Englisch
#inner {
position: absolute;
left: 50%;
}
#inner > div {
position: relative;
left: -50%;
}
<div id="outer">
<div id="inner"><div>Foo foo</div></div>
</div>
Fügen Sie Ihrem inneren div CSS hinzu. Setze margin: 0 auto
und setze seine Breite auf weniger als 100%, was der Breite des äußeren Div entspricht.
<div id="outer" style="width:100%">
<div id="inner" style="margin:0 auto;width:50%">Foo foo</div>
</div>
Dies ergibt das gewünschte Ergebnis.
#inner {
display: table;
margin: 0 auto;
}
<div id="outer" style="width:100%">
<div id="inner">Foo foo</div>
</div>
#inner {
width: 50%;
margin: 0 auto;
}
Einfach Margin:0px auto
:
#inner{
display: block;
margin: 0px auto;
width: 100px;
}
<div id="outer" style="width:100%">
<div id="inner">Foo foo</div>
</div>
text-align:center;
zu übergeordnetem div hinzufügen
#outer {
text-align: center;
}
https://jsfiddle.net/7qwxx9rs/
oder
#outer > div {
margin: auto;
width: 100px;
}
#outer {
width: 160px;
padding: 5px;
border-style: solid;
border-width: thin;
display: block;
}
#inner {
margin: auto;
background-color: lightblue;
border-style: solid;
border-width: thin;
width: 80px;
padding: 10px;
text-align: center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Die Hauptattribute zum Zentrieren des div sind margin: auto
und width:
gemäß den Anforderungen:
.DivCenter{
width: 50%;
margin: auto;
border: 3px solid #000;
padding: 10px;
}
div{
width:100px;
height:100px;
margin:0 auto;
}
für normale Sache, wenn Sie div statische Weise verwenden
wenn Sie möchten, dass div zentriert ist, wenn div zu seinem übergeordneten Element absolut ist, ist dies ein Beispiel:
.parentdiv{
position:relative;
height:500px;
}
.child_div{
position:absolute;
height:200px;
width:500px;
left:0;
right:0;
margin:0 auto;
}
Sie können es auf andere Weise tun. Siehe die folgenden Beispiele:
1. First Method
#outer {
text-align: center;
width: 100%;
}
#inner {
display: inline-block;
}
2. Second method
#outer {
position: relative;
overflow: hidden;
}
.centered {
position: absolute;
left: 50%;
}
Versuche dies:
<div id="a">
<div id="b"></div>
</div>
CSS:
#a{
border: 1px solid red;
height: 120px;
width: 400px
}
#b{
border: 1px solid blue;
height: 90px;
width: 300px;
position: relative;
margin-left: auto;
margin-right: auto;
}
Zunächst einmal: Sie müssen dem zweiten Div eine Breite zuweisen:
Zum Beispiel:
<div id="outter">
<div id="inner"Centered content">
</div
</div>
#inner{
width: 50%;
margin: auto;
}
Wenn Sie keine Breite angeben, wird die gesamte Breite der Linie verwendet.