How to align absolutely positioned element to center?
I am trying to stack two canvas together and make it a double layers canvas.
I've saw an example here:
<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>
But i would like to set both of the canvas align at the center of the screen. If i set the value of left as a constant, while I change the orientation of the screen (as I'm doing aps on iPad) the canvas won't remain at the middle of the screen like how it act in
<div align="center">
Can anyone help, please?
If you set both left and right to zero, and left and right margins to auto you can center an absolutely positioned element.
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
If you want to center align an element without knowing it's width and height do:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Example:
*{
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%);
} Popup
left will extrapolate the parent's width, breaking the content to the next lines to avoid overflow. But it's possible to keep the content inline while using this approach by setting in the element the white-space attribute to nowrap. Try that in this JSFiddle.
try this method, working fine for me
position: absolute;
left: 50%;
transform: translateX(-50%);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
Have you tried using?:
left:50%;
top:50%;
margin-left:-[half the width] /* As pointed out on the comments by Chetan Sastry */
Not sure if it'll work, but it's worth a try...
Minor edit: Added the margin-left part, as pointed out on the comments by Chetan...
margin-left: <negative half the width>
All you have to do is make sure your parent <div> has position:relative, and set a height and width for the element you want centered. Use the following CSS:
.layer {
width: 600px; height: 500px;
display: block;
position:absolute;
top:0;
left: 0;
right:0;
bottom: 0;
margin:auto;
}
https://output.jsbin.com/aXEZUgEJ/1/
Move the parent div to the middle with
left: 50%;
top: 50%;
margin-left: -50px;
Move the second layer over the other with
position: relative;
left: -100px;
Follow WeChat
Success story sharing
Want to stay one step ahead of the latest teleworks?
Subscribe Now相似问题
- How can I vertically center a div element for all browsers using CSS?
- Vertically align text next to an image?
- How to disable text selection highlighting
- How can I center an absolutely positioned element in a div?
- How to align 3 divs (left/center/right) inside another div?
- How to vertically center a container in Bootstrap?
- In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
left: 80px;will move the object 40px (!) to the right of the center.