Vraag Hoe de absolute positie op het midden uitlijnen?


Ik probeer twee doeken op elkaar te stapelen en er een dubbel lagen canvas van te maken.

Ik heb hier een voorbeeld gezien:

<div style="position: relative;">
 <canvas id="layer1" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer2" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

Maar ik wil beide canvaslijnen in het midden van het scherm uitlijnen. Als ik de waarde van 'links' als constante instel, terwijl ik de richting van het scherm wijzig (zoals ik apen op de iPad doe), blijft het canvas niet in het midden van het scherm zoals hoe het werkt in

<div align="center">

Kan iemand alstublieft helpen?


63
2017-10-11 02:14


oorsprong


antwoorden:


Als u zowel links als rechts de nul- en linker- en rechtermarge instelt op automatisch, kunt u een absoluut gepositioneerd element centreren.

position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;

144
2017-09-22 04:09



Als je een element in het midden wilt uitlijnen, zonder te weten wat de breedte en hoogte zijn, doe je het volgende:

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

Voorbeeld:

*{
  margin:0;
  padding:0;
}
section{
  background:red;
  height: 100vh;
  width: 100vw;
}
div{  
  width: 80vw;
  height: 80vh;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<section>
  <div>
    <h1>Popup</h1>
  </div>
</section>


43
2018-01-27 22:10



Heb je geprobeerd met ?:

left:50%;
top:50%;
margin-left:-[half the width] /* As pointed out on the comments by Chetan Sastry */

Niet zeker of het werkt, maar het is het proberen waard ...

Kleine bewerking: Toegevoegd het margin-left deel, zoals aangegeven op de opmerkingen van Chetan ...


15
2017-10-11 02:17



Alles wat je moet doen is,

zorg ervoor dat uw bovenliggende DIV positie: relatief heeft

en het element dat je wilt centreren, stel het een hoogte en breedte in. gebruik de volgende CSS

.layer {
    width: 600px; height: 500px;
    display: block;
    position:absolute;
    top:0;
    left: 0;
    right:0;
    bottom: 0;
    margin:auto;
  }
http://jsbin.com/aXEZUgEJ/1/

6
2017-12-04 05:28



position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;

5
2018-02-21 14:05



Verplaats de parent-div naar het midden met

left: 50%;
top: 50%;
margin-left: -50px;

Verplaats de tweede laag over de andere met

position: relative;
left: -100px;

1
2017-10-11 02:39