Wie div in der Mitte einer Seite ausrichten?

Ich möchte ein Div, das vertikal und horizontal zentriert ist, d. H. In der Mitte einer Seite. Ich habe versucht, Position: absolut und machen die Divs oben rechts unten links 0! Aber das Problem ist, wenn ich die Seite zoome es mit anderen Header und anderen Divs überlappt! BITTE HILF MIR! Wie kann ich das div in der Mitte einer Seite positionieren, ohne andere divs zu überlappen, während ich die Seite zoome?Wie div in der Mitte einer Seite ausrichten?

Wie ich habe versucht:

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

Quelle

2017-07-20 Fred

Versuchen Marge Einstellung 'auto' –

Hoppla! Ich habe vergessen, Rand zu nennen: Auto in meinem Code. Ich habe das schon versucht, aber immer noch nicht funktioniert – Fred

geben Sie einen Versuch ... https://jsfiddle.net/DChandraShekhar/8a7L8dtv/1/ –

html, body { 
 
    height:100%; 
 
} 
 

 
.center { 
 
    border: 2px solid blue; 
 
    margin: auto; 
 
    position: relative; 
 
    text-align: center; 
 
    top: 50%; 
 
    width: 20%; 
 
}

<div class="center"> 
 
    <p>Test Text</p> 
 
</div>

Quelle

2017-07-20 04:03:37 terryeah

try this

HTML

<div class="center"> 
    Lorem ipsum dolor sit amet, 
</div>

CSS

html,body{ 
    height:100%; 
} 
.center{ 
    position: relative; 
    top:50%; 
    left:50%; 
}

Link for reference

this helps ..

Quelle

2017-07-20 04:06:37

Versuchen,

html{ 
 
    height:100%; 
 
} 
 
body 
 
{ height:100%; 
 
    background-color: #fcfcfc; 
 

 
} 
 
.center 
 
{ 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #ccc; 
 
    border-radius: 3px; 
 
}

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

Quelle

2017-07-20 04:25:46 Hash

horizontal Um ein Blockelement zentriert (wie div), verwenden margin: Auto

.center { 
 
    margin: auto; 
 
    width: 60%; 
 
    border: 3px solid #73AD21; 
 
    padding: 10px; 
 
}

<div class="center"> 
 
    <p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p> 
 
</div>

Quelle

2017-07-20 04:36:25

Flex ist die beste Lösung, perfekte Lage.

Wenn Sie dies für einen Loader möchten, tun Sie einfach eine volle Größe div mit Position fixiert und verwenden Sie flex für den Div-Inhalt.

Flex Führungs https://css-tricks.com/snippets/css/a-guide-to-flexbox/

body, html { 
 
    height:100% 
 
} 
 

 
body { 
 
    display:flex; 
 
    margin:0; 
 
    flex-direction:column; 
 
} 
 

 
.mydiv { 
 
    margin:auto; 
 
}

<div class="mydiv">test</div>

Quelle

2017-07-20 04:42:51 EyWN

Ich denke auch, dass flex die beste Lösung dafür ist. Vorsicht vor einigen alten Browsern - es könnte eine andere Lösung für sie benötigen. Sie sollten wahrscheinlich keinen Flex am Körper verwenden, um die anderen Elemente auf Ihrer Seite nicht zu beeinflussen. Verwenden Sie es stattdessen in einem Wrapper-Div, das das zu zentrierende div umgibt. Wie

test

Geben Sie den Wrapper 100% Breite und Höhe und Position fixiert oder absolut, wie Sie bevorzugen. – Ina

Das funktioniert immer noch nicht! Das div überschneidet sich beim Zoomen der Seite einfach mit anderen Elementen! Ich möchte es in seiner Position reparieren – Fred

Wie div in der Mitte einer Seite ausrichten?

Antwort

Verwandte Themen