Mitte eine Position: Festes Element
https://stackoverflow.com/questions/2005954
-
18-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich möchte eine machen position: fixed; Popup -Box mit dynamischer Breite und Höhe auf den Bildschirm zentriert. ich benutzte margin: 5% auto; dafür. Ohne position: fixed; Es dreht sich horizontal fein, aber nicht vertikal. Nach dem Hinzufügen position: fixed;, Es zentriert sich sogar nicht horizontal.
Hier ist der komplette Set:
.jqbox_innerhtml {
position: fixed;
width: 500px;
height: 200px;
margin: 5% auto;
padding: 10px;
border: 5px solid #ccc;
background-color: #fff;
}<div class="jqbox_innerhtml">
This should be inside a horizontally
and vertically centered box.
</div>Wie zentriere ich diese Box mit CSS im Bildschirm?
Lösung
Sie müssen im Grunde einstellen top und left zu 50% Um die linke Ecke des Divs zu zentrieren. Sie müssen auch die festlegen margin-top und margin-left zur negativen Hälfte der DIV -Höhe und -breite, um das Zentrum in die Mitte des DIV zu verschieben.
Somit a bereitgestellt a <!DOCTYPE html> (Standardmodus), dies sollte tun:
position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */
Oder wenn Sie sich nicht um vertikal und alte Browser wie IE6/7 zentrieren, können Sie stattdessen auch hinzufügen left: 0 und right: 0 zu dem Element mit einem margin-left und margin-right von auto, so dass das fest positionierte Element mit einer festen Breite weiß, wo es links ist und rechts von den Rechtssätzen starten. In Ihrem Fall also:
position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;
Auch dies funktioniert nur in IE8+, wenn Sie sich um IE interessieren, und diese Zentren nur horizontal nicht vertikal.
Andere Tipps
Ich möchte eine Popup -Box mit dynamischer Breite und Höhe auf den Bildschirm zentrieren.
Hier ist ein moderner Ansatz, um ein Element mit einer dynamischen Breite horizontal zu zentrieren - es funktioniert in allen modernen Browsern. Unterstützung ist hier zu sehen.
.jqbox_innerhtml {
position: fixed;
left: 50%;
transform: translateX(-50%);
}
Sowohl für vertikale als auch für horizontale Zentrierung können Sie Folgendes verwenden:
.jqbox_innerhtml {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Möglicherweise möchten Sie auch mehr von Anbietern vorangestellte Eigenschaften hinzufügen (siehe Beispiele).
Oder einfach hinzufügen left: 0 und right: 0 Zu Ihrem ursprünglichen CSS, was es ähnlich wie ein regelmäßiges nicht fixiertes Element und die übliche Auto-Margin-Technik verhalten: funktioniert:
.jqbox_innerhtml
{
position: fixed;
width:500px;
height:200px;
background-color:#FFF;
padding:10px;
border:5px solid #CCC;
z-index:200;
margin: 5% auto;
left: 0;
right: 0;
}
Beachten Sie, dass Sie ein gültiges (x) HTML verwenden müssen DOCTYPE Damit es sich in IE richtig verhalten kann (was Sie natürlich trotzdem haben sollten ..!
Fügen Sie einen Container hinzu wie:
div {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
Dann stecken Sie Ihre Box in diese DIV. Erledigt die Arbeit.
Einfach hinzufügen:
left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
Diese Lösung erfordert nicht, dass Sie eine Breite und Höhe in Ihrem Popup -Div definieren.
Und anstatt die Größe des Popups und abzüglich der Hälfte nach oben zu berechnen, ärgert sich JavaScript die Größe des PopupContainer, um den gesamten Bildschirm auszufüllen ...
(100% Höhe, funktioniert bei der Verwendung von Displays nicht: Tabellenzell; (Wich ist erforderlich, um etwas vertikal zu zentrieren) ...
Wie auch immer, es funktioniert :)
left: 0;
right: 0;
Arbeitete nicht unter IE7.
Gewechselt zu
left:auto;
right:auto;
Begann zu arbeiten, aber in den Restbrowsern funktioniert es nicht mehr! So verwendet so für IE7 unten so
if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {
strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}
#modal {
display: flex;
justify-content: space-around;
align-items: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
Im Inneren kann es jedes Element mit Differenzbreite, Höhe oder ohne sein. Alle sind zentriert.
Sie können es im Grunde genommen in einen anderen einpacken div und setze seine position zu fixed.
.bg {
position: fixed;
width: 100%;
}
.jqbox_innerhtml {
width: 500px;
height: 200px;
margin: 5% auto;
padding: 10px;
border: 5px solid #ccc;
background-color: #fff;
}<div class="bg">
<div class="jqbox_innerhtml">
This should be inside a horizontally and vertically centered box.
</div>
</div>Um die Position zu beheben, verwenden Sie dies:-
div {
position: fixed;
left: 68%;
transform: translateX(-8%);
}
ich benutzte vw (Ansichtsfenster) und vh (Ansichtsfenster). Ansichtsfenster ist Ihr gesamter Bildschirm. 100vw Ist Ihre Bildschirme die Gesamtbreite und 100vh ist die Gesamthöhe.
.class_name{
width: 50vw;
height: 50vh;
border: 1px solid red;
position: fixed;
left: 25vw;top: 25vh;
}
Einer möglich Antworten:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Center Background Demo</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
div.centred_background_stage_1 {
position: fixed;
z-index:(-1 );
top: 45%;
left: 50%;
}
div.centred_background_stage_2 {
position: relative;
left: -50%;
top: -208px;
/* % does not work.
According to the
http://reeddesign.co.uk/test/points-pixels.html
6pt is about 8px
In the case of this demo the background
text consists of three lines with
font size 80pt.
3 lines (with space between the lines)
times 80pt is about
~3*(1.3)*80pt*(8px/6pt)~ 416px
50% from the 416px = 208px
*/
text-align: left;
vertical-align: top;
}
#bells_and_wistles_for_the_demo {
font-family: monospace;
font-size: 80pt;
font-weight: bold;
color: #E0E0E0;
}
div.centred_background_foreground {
z-index: 1;
position: relative;
}
</style>
</head>
<body>
<div class="centred_background_stage_1">
<div class="centred_background_stage_2">
<div id="bells_and_wistles_for_the_demo">
World<br/>
Wide<br/>
Web
</div>
</div>
</div>
<div class="centred_background_foreground">
This is a demo for <br/>
<a href="http://stackoverflow.com/questions/2005954/center-element-with-positionfixed">
http://stackoverflow.com/questions/2005954/center-element-with-positionfixed
</a>
<br/><br/>
<a href="http://www.starwreck.com/" style="border: 0px;">
<img src="./star_wreck_in_the_perkinnintg.jpg"
style="opacity:0.1;"/>
</a>
<br/>
</div>
</body>
</html>
Versuchen Sie dies für horizontale Elemente, die nicht korrekt im Mittelpunkt stehen.
Breite: Calc (Breite: 100% - Breite, was auch immer sonst noch nicht zentriert ist)
Zum Beispiel, wenn Ihre Seitennavigationsleiste 200px beträgt:
width: calc(100% - 200px);
Die einzige narrensichere Lösung ist die Verwendung von Tabellenalign = Center wie in:
<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>
Ich kann nicht glauben, dass Menschen auf der ganzen Welt diese reichliche Menge an die alberne Zeit verschwenden, um ein so grundlegendes Problem wie die Zentrum eines Divs zu lösen. CSS -Lösung funktioniert nicht für alle Browser, JQuery Solution ist eine Software -Computerlösung und aus anderen Gründen keine Option.
Ich habe wiederholt zu viel Zeit verschwendet, um die Verwendung von Tisch zu vermeiden, aber Erfahrung sagen Sie mir, ich solle aufhören, ihn zu bekämpfen. Verwenden Sie Tabelle zum Zentrieren von Div. Funktioniert die ganze Zeit in allen Browsern! Mach dir nie mehr Sorgen.
