Centrare un position: fixed elemento
https://stackoverflow.com/questions/2005954
-
18-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Vorrei fare una scatola pop-up position: fixed; centrato sullo schermo con una larghezza dinamica e l'altezza. Ho usato margin: 5% auto; per questo. Senza position: fixed; centra bene orizzontalmente, ma non verticalmente. Dopo aver aggiunto position: fixed;, è ancora non centratura orizzontale.
Ecco il set completo:
.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>
Come faccio CENTRO scatola a schermo con i CSS?
Soluzione
È praticamente necessario impostare top e left a 50% per centrare l'angolo superiore sinistro del div. È inoltre necessario impostare il margin-top e margin-left alla metà negativa di altezza e la larghezza del div di spostare il centro verso la metà del div.
In questo modo, ha fornito un <!DOCTYPE html> (modalità standard), questo dovrebbe fare:
position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */
In alternativa, se non si cura di centrare verticalmente e vecchi browser come IE6 / 7, allora si può anche aggiungere invece left: 0 e right: 0 all'elemento avere un margin-left e margin-right di auto, in modo che l'elemento posizionato fisso avendo una larghezza fissa sa dove iniziano le sue offset sinistro e destro. Nel tuo caso quindi:
position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;
Ancora una volta, questo funziona solo in IE8 + se vi preoccupate per IE, e questo centra solo orizzontalmente e non verticalmente.
Altri suggerimenti
Voglio fare una scatola pop-up centrato sullo schermo con la larghezza e l'altezza dinamica.
Ecco un approccio moderno per orizzontalmente centrare un elemento con una larghezza dinamica - funziona in tutti i browser moderni; Supporto può essere visto qui .
.jqbox_innerhtml {
position: fixed;
left: 50%;
transform: translateX(-50%);
}
Per sia verticale che orizzontale centratura è possibile utilizzare il seguente:
.jqbox_innerhtml {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Si potrebbe desiderare di aggiungere in più vendor prefisso proprietà troppo (vedi gli esempi).
O semplicemente aggiungere left: 0 e right: 0 al vostro CSS originale, che lo rende si comportano in modo simile ad un elemento non fissa regolare e la tecnica di auto-margine di solito funziona:
.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;
}
Nota è necessario utilizzare un valido (X) HTML DOCTYPE per questo comportarsi correttamente in IE (che si dovrebbe ovviamente avere comunque ..!)
Aggiungi un contenitore come:
div {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
Poi, mettete la vostra scatola in questo div farà il lavoro.
Basta aggiungere:
left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
Questa soluzione non richiede di voi per definire una larghezza e l'altezza al div popup.
E invece di calcolare le dimensioni del popup, e meno della metà verso l'alto, javascript è resizeing il popupContainer di compilare l'intero schermo ...
(100 altezza%, non funziona quando useing display: table-cell; (goduto è necessario per centrare qualcosa in verticale)) ...
In ogni caso funziona:)
left: 0;
right: 0;
non funzionava in IE7.
Cambiato
left:auto;
right:auto;
lavoro avviato ma nel resto I browser che smettere di lavorare! Così usato in questo modo per IE7 seguente
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%;
}
interno può essere qualsiasi elemento con diffenet larghezza, altezza o senza. tutti sono centrati.
Si può sostanzialmente avvolgerlo in un altro div e impostare il suo position a 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>
Per fissare l'uso posizione di questo: -
div {
position: fixed;
left: 68%;
transform: translateX(-8%);
}
Ho usato vw (larghezza finestra) e vh (altezza finestra). viewport è l'intero schermo. 100vw è vostri schermi larghezza totale e 100vh è altezza totale.
.class_name{
width: 50vw;
height: 50vh;
border: 1px solid red;
position: fixed;
left: 25vw;top: 25vh;
}
Una possibile rispondere :
<!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>
Provare a utilizzare questo per elementi orizzontali, che non centrerà correttamente.
larghezza: calc (larghezza: 100% - larghezza qualsiasi altra cosa è spento centrandola )
Per esempio, se la vostra barra di navigazione laterale è 200px:
width: calc(100% - 200px);
L'unica soluzione infallibile consiste nell'utilizzare tavolo align = center come in:
<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>
Non posso credere che la gente di tutto il mondo che sprecano questi abbondante in tanto stupido per risolvere un problema fondamentale come centrare un div. soluzione css non funziona per tutti i browser, la soluzione jQuery è una soluzione software di calcolo e non è un'opzione per altri motivi.
Ho perso troppo tempo ripetutamente per evitare l'uso di tavolo, ma l'esperienza mi dirà di smettere di combatterlo. Utilizzare tavolo per div centraggio. Funziona tutto il tempo in tutti i browser! Non preoccuparsi più.
