Wie zentriere ich ein absolut positioniertes Element in div?

1078

Ich muss ein div(mit position:absolute;) Element in der Mitte meines Fensters platzieren. Aber ich habe Probleme damit, weil die Breite unbekannt ist .

Ich habe es versucht. Es muss jedoch angepasst werden, da die Breite reagiert.

.center {
  left: 50%;
  bottom:5px;
}

Irgendwelche Ideen?

— Ish
quelle

4

Sie haben ein Beispiel in Beispielen für das absolute Zentrum , das in verschiedenen Situationen verallgemeinert werden kann.

— Mihai8

2

Es gibt eine bessere Antwort auf diese Frage unter stackoverflow.com/questions/17976995/…

— Andrew Swift

1333

<body>
  <div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
      I am some centered shrink-to-fit content! <br />
      tum te tum
    </div>
  </div>
</body>

Erweitern Sie das Snippet

— Bobince
quelle

76

Genial. Hat für mich gearbeitet! Ein Problem, das ich hatte: Das Bild, das ich zentrierte, war ziemlich groß. Dies führte dazu, dass das äußere Div über den rechten Rand der Seite hinausging und horizontales Scrollen verursachte. Ich habe die CSS-Eigenschaft "left" gegen "right" ausgetauscht, und bisher funktioniert es besser, da das Überschreiten des linken Bildschirmrandes kein Scrollen verursacht

— BoomShaka

Was ist, wenn der Benutzer die Seite nach unten gescrollt hat, Overlay oben angezeigt wird? Glauben Sie, dass es eine gute Idee ist, jquery zu verwenden, um das Scroll-Problem zu beheben

— PUG

1

Eine Lösung für das Scroll-Problem kann sein, position: fixedaber wenn die Höhe der Überlagerung unbekannt ist, müssen Bildlaufleisten für die Überlagerung implementiert werden

— PUG

3

Bei dieser Technik ist ein kleines Problem aufgetreten. Da der äußere Teil 50% des Bildschirms einnimmt, tritt eine gewisse Verschiebung auf, wenn der Text breiter als die Bildschirmgröße von 50% ist. Ich habe dies gelöst, indem ich das äußere div auf "width: 100%" gesetzt und die linke Eigenschaft entfernt habe. Für das innere Div setze ich einfach meine Textausrichtung auf Mitte. Dies löst das Problem.

— Nicky L.

3

Die prozentuale Höhe ist in diesem Fall relativ zum enthaltenden Block <html>. Da das <html>Element jedoch keine heightAngabe hat, nimmt es die Höhe des gesamten Inhalts im Dokument an. Dies ist nichts, da der einzige Inhalt absolut positioniert ist (aus dem Inhaltsfluss herausgenommen). Das Hinzufügen height: 100%zum <html>Element macht einen Unterschied.

— Bobince

1801

Das funktioniert bei mir:

#content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100px; /* Need a specific value to work */
}

<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

Erweitern Sie das Snippet

— Matthias Weiler
quelle

36

Ich möchte nur vermitteln, dass negative Ränder ein absolut gültiges CSS sind und nicht als "schmutziger Hack" angesehen werden sollten. Negative Ränder werden in der W3C-Box-Modellspezifikation erwähnt. Einige Personen scheinen willkürlich zu entscheiden, dass es sich um einen Hack handelt, weil sie a) sie nicht kennen oder b) sie verwenden, um ihr schlechtes CSS zu beheben.

— Joseph Ravenwolfe

58

Die Breite des zu zentrierenden Div muss eingestellt werden - funktioniert nicht automatisch, z. B. mit einer Schaltfläche mit Text darauf.

— Stefan

2

@Joshua Dies wird nur horizontal zentriert, nicht vertikal wie die andere Antwort.

— Ygoe

3

Ich bevorzuge diese Lösung, da sie die Größe des Ansichtsfensters nicht erhöht.

— Eyddee

13

Für die browserübergreifende Unterstützung: widthsollte auf einen bestimmten Wert eingestellt werden, damit dies funktioniert. autound 100%zentriert das Element nicht. display: block;ist ein Muss. position: absolute;ist kein Muss. Alle Werte funktionieren. Übergeordnete Elemente positionsollten auf etwas anderes als gesetzt werden static. Einstellen leftund rightzu 0ist nicht erforderlich. margin-left: auto; margin-right: auto;wird die Arbeit machen.

— Onur Yıldırım

767

Reaktionsschnelle Lösung

Hier ist eine gute Lösung für responsives Design oder unbekannte Dimensionen im Allgemeinen, wenn Sie IE8 und niedriger nicht unterstützen müssen.

.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

Code-Snippet anzeigen

.outer {
    position: relative; /* or absolute */
    
    /* unnecessary styling properties */
    margin: 5%;
    width: 80%;
    height: 500px;
    border: 1px solid red;
}

.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* unnecessary styling properties */
    max-width: 50%;
    text-align: center;
    border: 1px solid blue;
}

<div class="outer">
    <div class="inner">I'm always centered<br/>doesn't matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div>
</div>

Erweitern Sie das Snippet

Hier ist eine JS-Geige

Der Hinweis ist, dass left: 50%relativ zum Elternteil ist, während dietranslate Element Transformation relativ zur Breite / Höhe der Elemente ist.

Auf diese Weise haben Sie ein perfekt zentriertes Element mit einer flexiblen Breite für Kind und Eltern. Bonus: Dies funktioniert auch, wenn das Kind größer als das Elternteil ist.

Sie können es damit auch vertikal zentrieren (und auch hier können Breite und Höhe von Eltern und Kind völlig flexibel (und / oder unbekannt) sein):

.centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

Beachten Sie, dass möglicherweise auch ein transformHerstellerpräfix erforderlich ist . Zum Beispiel-webkit-transform: translate(-50%,-50%);

— Probleme von Sumit
quelle

26

Da keine IE7-Unterstützung mehr erforderlich ist, sollte dies die De-facto-Lösung sein. Diese Lösung ist besser als die Technik left: 0 / right: 0, da dadurch die Elemente in voller Breite bleiben, während die Breite erhalten bleibt und Elemente mit unbekannter Breite bearbeitet werden.

— Aleemb

51

Dies ist bei weitem die beste Antwort, wenn die Box, in der sich das div befindet, kleiner als das Kind ist.

— Fall

2

@ChadJohnson natürlich tut es. Versuchen Sie es mit dem webkit-Präfix, wie ich vorgeschlagen habe.

— Probleme von

2

Ah, ich habe deine Notiz über -webkit verpasst. Genial.

— Chad Johnson

3

transform: translatescheint position: fixedbei Kindern unbrauchbar zu machen . Die akzeptierte Antwort funktioniert in diesem Fall besser.

— dmvianna

49

Wirklich schöner Beitrag. Ich wollte nur hinzufügen, wenn jemand es mit einem einzelnen Div-Tag machen möchte, dann hier der Ausweg:

Nehmen widthals 900px.

#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

In diesem Fall sollte man das widthvorher wissen .

— Pratikabu
quelle

26

"because the width is unknown"... das beantwortet die Frage nicht

— Michel Ayres

15

hi @Michel eigentlich, wenn Sie bei Google nach etwas suchen, das mit dem Zentrieren des absoluten Div zusammenhängt, kommt dieser Link als erster Link. Deshalb habe ich diese Lösung hinzugefügt, falls jemand wie ich nach der oben genannten Lösung

— sucht

1

Nicht sehr nützlich für Responsive Design, aber es hat bei mir funktioniert, bis ich anfing, Responsive Design zu machen. Dies ist eine gültige Antwort zum Zentrieren absolut positionierter Elemente mit bekannter Breite .

— Sean Kendle

35

Absolutes Zentrum

HTML:

<div class="parent">
  <div class="child">
    <!-- content -->
  </div>
</div>

CSS:

.parent {
  position: relative;
}

.child {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  margin: auto;
}

Demo: http://jsbin.com/rexuk/2/

Getestet in Google Chrome, Firefox und IE8

Hoffe das hilft :)

— Ijas Ameenudeen
quelle

Dies funktioniert nicht, bitte überprüfen Sie den folgenden Codepen codepen.io/anon/pen/YqWxjJ

— Mark

1

Entschuldigung, ich denke, das wird funktionieren, aber Sie müssen eine feste Höhe und Breite codepen.io/anon/pen/WwxEYQ

— Mark

31

diese Arbeit für vertikale und horizontale

  #myContent{
        position: absolute;
        left: 0;
        right: 0;
        top:0;
        bottom:0;
        margin: auto;
   }

Wenn Sie das Element zum Mittelpunkt des übergeordneten Elements machen möchten, legen Sie die Position des übergeordneten Verwandten fest

 #parentElement{
      position:relative
  }

bearbeiten:

Richten Sie für die vertikale Mitte die eingestellte Höhe an Ihrem Element aus. danke an @Raul
Wenn Sie das Element zum Mittelpunkt des übergeordneten Elements machen möchten, setzen Sie die Position des übergeordneten Elements auf relativ

— Mohsen Abdollahi
quelle

2

Ich denke, Sie müssen die Höhe hinzufügen, damit die Vertikale funktioniert.

— Raul

Sieht so aus, als ob sich diese Position in der Mitte der Seite befindet, nicht in der Mitte eines anderen Elements.

— Günter Zöchbauer

1

@ GünterZöchbauer ja, wenn Sie das Element zum Mittelpunkt des übergeordneten Elements machen möchten, setzen Sie die Position des übergeordneten Verwandten.

— Mohsen Abdollahi

20

Auf der Suche nach einer Lösung habe ich oben Antworten erhalten und konnte Inhalte mit Matthias Weilers Antwort zentrieren, aber mit Textausrichtung.

#content{
  position:absolute;
  left:0;
  right:0;
  text-align: center;
}

Arbeitete mit Chrom und Firefox.

— Cavila
quelle

5

Ich denke, Sie brauchen nicht das "Text-Align: Center"

— Tobias

Dies hat mein Problem hier behoben . Vielen Dank!

— Volomike

Ich brauchte das "text-align: center", und dies funktionierte dort, wo die von @ProblemsOfSumit vorgeschlagene Lösung nicht funktionierte, da mein Text umbrochen wurde.

— Nat

19

Wenn Sie auch horizontal und vertikal zentrieren müssen:

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

— michal.jakubeczy
quelle

sehr cool fix danke

— Stanley Bateswar

15

** ANTWORTLÖSUNG **

Angenommen, das Element in der Div ist eine andere Div ...

Diese Lösung funktioniert gut

<div class="container">
  <div class="center"></div>
</div>

Der Behälter kann eine beliebige Größe haben (muss relativ zur Position sein).

.container {
position: relative;/*important*/
width: 200px;/*any width*/
height: 200px;/*any height*/
background: red;
}

Das Element ( div ) kann auch eine beliebige Größe haben (muss kleiner als der Container sein )

.center {
position: absolute;/*important*/
top: 50%;/*position Y halfway in*/
left: 50%;/*position X halfway in*/
transform: translate(-50%,-50%);/*move it halfway back(x,y)*/
width: 100px;/*any width*/
height: 100px;/*any height*/
background: blue;
}

Das Ergebnis wird so aussehen. Führen Sie das Code-Snippet aus

.container {
	position: relative;
	width: 200px;
	height: 200px;
	background: red;
}

.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100px;
	height: 100px;
	background: blue;
}

<div class="container">
	<div class="center"></div>
</div>

Erweitern Sie das Snippet

Ich fand es sehr hilfreich

— RealMJDev
quelle

1

Genius. Warum hat sich der andere das nicht ausgedacht?

— Mesqueeb

Vielen Dank,

— viel Spaß

13

Dies ist eine Mischung aus anderen Antworten, die für uns funktioniert haben:

.el {
   position: absolute;
   top: 50%;
   margin: auto;
   transform: translate(-50%, -50%);
}

— Crashalot
quelle

Nizza fix danke Mann!

— Stanley Bateswar

12

Ich verstehe, dass diese Frage bereits einige Antworten hat, aber ich habe nie eine Lösung gefunden, die in fast allen Klassen funktioniert, die auch sinnvoll und elegant ist. Hier ist meine Einstellung, nachdem ich ein paar Änderungen vorgenommen habe:

.container {
    position: relative;
}

.container .cat-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 100;
    text-transform: uppercase; /* Forces CSS to treat this as text, not a texture, so no more blurry bugs */
    background-color: white;
}

.color-block {
  height: 250px;
  width: 100%;
  background-color: green;
}

<div class="container">
  <a class="cat-link" href="">Category</a>
  <div class="color-block"></div>
</div>

Erweitern Sie das Snippet

Das heißt, gib mir ein top: 50%und ein left: 50%, dann transformiere (schaffe Raum) auf beiden X / Y-Achsen in die-50% Wert, in gewissem Sinne "einen Spiegelraum schaffen".

Als solches schafft dies einen gleichen Raum auf allen 4 Punkten eines Div, der immer eine Box ist (hat 4 Seiten).

Dieser Wille:

Arbeiten Sie, ohne die Größe / Breite der Eltern kennen zu müssen.
Arbeiten Sie an Responsive.
Arbeiten Sie entweder auf der X- oder der Y-Achse. Oder beides, wie in meinem Beispiel.
Ich kann mir keine Situation einfallen lassen, in der es nicht funktioniert.

— Daniel Moss
quelle

Bitte lassen Sie mich wissen, wenn Sie eine Situation finden, in der dies nicht funktioniert, damit ich die Frage mit Ihrer Eingabe bearbeiten kann.

— Daniel Moss

Transformieren / Übersetzen bewirkt, dass Safari Text in einem bestimmten Maßstab unscharf macht

— James Tan

@ DanielMoss einen Grund, nicht zu verwenden translate(-50%,-50%);?

— Mark Baijens

12

Funktioniert mit jeder zufälligen unbekannten Breite des absolut positionierten Elements, das Sie in der Mitte Ihres Containerelements haben möchten.

Demo

<div class="container">
  <div class="box">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </div>
</div>

.container {
  position: relative;
  width: 100%;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

— lowtechsun
quelle

9

Flex kann verwendet werden, um absolut positionierte Div zu zentrieren.

display:flex;
align-items:center;
justify-content:center;

Code-Snippet anzeigen

.relative {
  width: 275px;
  height: 200px;
  background: royalblue;
  color: white;
  margin: auto;
  position: relative;
}

.absolute-block {
  position: absolute;
  height: 36px;
  background: orange;
  padding: 0px 10px;
  bottom: -5%;
  border: 1px solid black;
}

.center-text {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1px 2px 10px 2px rgba(0, 0, 0, 0.3);
}

<div class="relative center-text">
  Relative Block
  <div class="absolute-block center-text">Absolute Block</div>
</div>

Erweitern Sie das Snippet

— Dhaval Jardosh
quelle

auf meinem Bildschirm -Firefox 68.x wird es einfach nicht ausgerichtet, der absolute Block erscheint am unteren Rand des relativen Blocks

— Webwoman

Kannst du das versuchen display: -webkit-flex;?

— Dhaval Jardosh

7

Soweit ich weiß, ist dies bei unbekannter Breite nicht möglich.

Sie könnten - wenn dies in Ihrem Szenario funktioniert - ein unsichtbares Element mit 100% Breite und Höhe absolut positionieren und das Element dort mit dem Rand zentrieren lassen: automatisch und möglicherweise vertikal ausrichten. Andernfalls benötigen Sie dazu Javascript.

— Pekka
quelle

+1 für die Sache "margin: auto". Ich habe dies zuvor versucht, um ein Div horizontal mit der Linie "margin: 0 auto" zu zentrieren - die "0" gilt für die vertikalen Ränder und die "auto" die horizontale. Ich denke, dies ist, was StackOverflow für das Div der obersten Ebene verwendet, um die 2 dicken weißen Ränder an den Seiten der Seite zu erhalten. Auf der W3Schools-Seite am CSS-Rand wird jedoch für den automatischen Wert angegeben, dass "das Ergebnis davon vom Browser abhängt". Ich habe es nicht persönlich in vielen verschiedenen Browsern versucht, daher kann ich diesen Punkt nicht wirklich kommentieren (aber es macht offensichtlich den Trick in einigen von ihnen)

— Steg

1

Es ist für eine unbekannte Breite (und Höhe) möglich, wenn IE8 kein Problem darstellt. Siehe meine Antwort für Details.

— ProblemsOfSumit

7

Ich möchte die Antwort von @ bobince ergänzen:

<body>
    <div style="position: absolute; left: 50%;">
        <div style="position: relative; left: -50%; border: dotted red 1px;">
            I am some centered shrink-to-fit content! <br />
            tum te tum
        </div>
    </div>
</body>

Verbessert: /// Dadurch wird die horizontale Bildlaufleiste nicht mit großen Elementen im zentrierten Div angezeigt.

<body>
    <div style="width:100%; position: absolute; overflow:hidden;">
        <div style="position:fixed; left: 50%;">
            <div style="position: relative; left: -50%; border: dotted red 1px;">
                I am some centered shrink-to-fit content! <br />
                tum te tum
            </div>
        </div>
    </div>
</body>

— Phiole
quelle

6

Hier ist ein nützliches jQuery-Plugin, um dies zu tun. Gefunden hier . Ich denke nicht, dass es nur mit CSS möglich ist

/**
 * @author: Suissa
 * @name: Absolute Center
 * @date: 2007-10-09
 */
jQuery.fn.center = function() {
    return this.each(function(){
            var el = $(this);
            var h = el.height();
            var w = el.width();
            var w_box = $(window).width();
            var h_box = $(window).height(); 
            var w_total = (w_box - w)/2; //400
            var h_total = (h_box - h)/2;
            var css = {"position": 'absolute', "left": w_total+"px", "top":
h_total+"px"};
            el.css(css)
    });
};

— Ben Shelock
quelle

Dies ist der bessere Weg, insbesondere bei reaktionsschnellem Design.

— m4tm4t

Wäre trivial, wenn auf jeden Fall jQuery verwendet würde

— Code Whisperer

8

Das ist NICHT der bessere Weg. Es ist immer besser, CSS zu verwenden, wann immer dies möglich ist. Das Zentrieren eines DIV ist mit CSS in jeder Achse und auch für reaktionsfähige Seiten möglich. JavaScript wird nicht benötigt!

— Probleme von

1

@yckart und in diesem Fall ist das Tool CSS.

— Probleme von

5

Sass / Kompass-Version von Responsive Solution oben:

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}

— Adam Spence
quelle

4

transform: translate(-50%, -50%)macht Text und alle anderen Inhalte unter OS X mithilfe von Webkit-Browsern verschwommen. keithclark.co.uk/articles/gpu-text-rendering-in-webkit

— Yasha

Verwenden Sie einfach die Art von Antialiasing, die Sie mögen. -webkit-font-smoothing: antialiased;Ich habe das aus dem Artikel entnommen, den Sie übrigens gepostet haben!

— Adam Spence

4

Meine bevorzugte Zentriermethode:

position: absolute;
margin: auto;
width: x%

absolute Blockelementpositionierung
Rand automatisch
gleich links / rechts, oben / unten

JSFiddle hier

— vp_arth
quelle

4

Das hat bei mir funktioniert:

<div class="container><p>My text</p></div>

.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}

— Alan
quelle

Es ist @Matthias Weiler Antwort 5 Jahre später.

— Aloisdg wechselt zu codidact.com

3

Ich weiß, dass ich bereits eine Antwort gegeben habe, und meine vorherige Antwort funktioniert zusammen mit anderen Antworten einwandfrei. Aber ich habe dies in der Vergangenheit verwendet und es funktioniert besser in bestimmten Browsern und in bestimmten Situationen. Also dachte ich, ich würde auch diese Antwort geben. Ich habe meine vorherige Antwort nicht "bearbeitet" und hinzugefügt, da ich der Meinung bin, dass dies eine völlig separate Antwort ist und die beiden von mir angegebenen Antworten nicht miteinander verbunden sind.

HTML:

<div id='parent'>
  <div id='child'></div>
</div>

CSS:

#parent {
  display: table;
}
#child {
  display: table-cell;
  vertical-align: middle;
}

— Dustin Poissant
quelle

3

#container
{
  position: relative;
  width: 100%;
  float:left
}
#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}

— Burcu AKCAOGLU
quelle

2

HTML

<div id='parent'>
  <div id='centered-child'></div>
</div>

CSS

#parent {
  position: relative;
}
#centered-child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
}

http://jsfiddle.net/f51rptfy/

— Dustin Poissant
quelle

2

Diese Lösung funktioniert, wenn das Element widthund hatheight

.wrapper {
  width: 300px;
  height: 200px;
  background-color: tomato;
  position: relative;
}

.content {
  width: 100px;
  height: 100px;
  background-color: deepskyblue;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

<div class="wrapper">
  <div class="content"></div>
</div>

Erweitern Sie das Snippet

— Mo.
quelle

2

Die Lösung dieser Frage hat in meinem Fall nicht funktioniert. Ich mache eine Beschriftung für einige Bilder und habe sie damit gelöst

top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;

display: flex;
align-items: center;

figure {
  position: relative;
  width: 325px;
  display: block
}


figcaption{
   
    position: absolute;
    background: #FFF;
    width: 120px;
    padding: 20px;

    -webkit-box-shadow: 0 0 30px grey;
    box-shadow: 0 0 30px grey;
    border-radius: 3px;
    display: block;
    
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    display: flex;
    align-items: center;
}

<figure>
  <img  src="https://picsum.photos/325/600">
  <figcaption> 
			But as much
    </figcaption>
                
</figure>

Erweitern Sie das Snippet

— Marcogomesr
quelle

1

HTML:

<div class="wrapper">
    <div class="inner">
        content
    </div>
</div>

CSS:

.wrapper {
    position: relative;

    width: 200px;
    height: 200px;

    background: #ddd;
}

.inner {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    margin: auto;

    width: 100px;
    height: 100px;

    background: #ccc;
}

Dies und weitere Beispiele hier

1

Dies ist ein Trick, den ich herausgefunden habe, damit ein DIV genau in der Mitte einer Seite schwebt. Wirklich hässlich natürlich, funktioniert aber in allen

Punkte und Striche

<div style="border: 5 dashed red;position:fixed;top:0;bottom:0;left:0;right:0;padding:5">
    <table style="position:fixed;" width="100%" height="100%">
        <tr>
            <td style="width:50%"></td>
            <td style="text-align:center">
                <div style="width:200;border: 5 dashed green;padding:10">
                    Perfectly Centered Content
                </div>
            </td>
            <td style="width:50%"></td>
        </tr>
    </table>
</div>

Reiniger

Wow, dass fünf Jahre vergangen sind, nicht wahr?

<div style="position:fixed;top:0px;bottom:0px;left:0px;right:0px;padding:5px">
<table style="position:fixed" width="100%" height="100%">
    <tr>
        <td style="width:50%"></td>
        <td style="text-align:center">
            <div style="padding:10px">
                <img src="Happy.PM.png">
                <h2>Stays in the Middle</h2>
            </div>
        </td>
        <td style="width:50%"></td>
    </tr>
</table>

— Herr B.
quelle

1

.center {
  position: absolute
  left: 50%;
  bottom: 5px;
}

.center:before {
    content: '';
    display: inline-block;
    margin-left: -50%;
}

— AndreyP
quelle

0

Sie können das Bild in ein Div einfügen und eine Div-ID hinzufügen. Das CSS für dieses Div hat eine text-align:center

HTML:

<div id="intro_img">

    <img src="???" alt="???">

</div>

CSS:

#intro_img {
    text-align:center;
}

— Dworvin Vonstrangle
quelle

0

#content { margin:0 auto; display:table; float:none;}

<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

Erweitern Sie das Snippet

— amit bende
quelle

0

Ein einfacher Ansatz, mit dem ich einen Block unbekannter Breite horizontal zentrieren konnte:

<div id="wrapper">
  <div id="block"></div>
</div>

#wrapper { position: absolute; width: 100%; text-align: center; }
#block { display: inline-block; }

Dem Regelsatz #block kann eine Eigenschaft zum Ausrichten von Text hinzugefügt werden, um dessen Inhalt unabhängig von der Ausrichtung des Blocks auszurichten.

Dies funktionierte auf neueren Versionen von Firefox, Chrome, IE, Edge und Safari.

— Terence Bandoian
quelle