CSS 如何将绝对定位的元素对齐到中心？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7720730/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align absolutely positioned element to center?
提问by PaulLing
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 leftas 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
但我想将两个画布都设置在屏幕中心对齐。如果我将 的值设置left为一个常量，当我改变屏幕的方向时（因为我在 iPad 上做 aps），画布不会像它的作用一样停留在屏幕的中间
<div align="center">
Can anyone help, please?
请问有人可以帮忙吗？
回答by Andrew
If you set both left and right to zero, and left and right margins to auto you can center an absolutely positioned element.
如果将 left 和 right 都设置为零，并且将左右边距设置为 auto，则可以将绝对定位的元素居中。
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
回答by Vinicius Santana
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%);
}<section>
<div>
<h1>Popup</h1>
</div>
</section>回答by Deleteman
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...
小编辑：添加了左边距部分，正如 Chetan 的评论所指出的那样......
回答by Mihai Ciobanu
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
回答by STEEL
All you have to do is,
你所要做的就是，
make sure your parent DIV has position:relative
确保您的父 DIV 具有位置：相对
and the element you want center, set it a height and width. use the following CSS
和您想要居中的元素，为其设置高度和宽度。使用以下 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/
回答by subindas pm
try this method, working fine for me
试试这个方法，对我来说很好用
position: absolute;
left: 50%;
transform: translateX(-50%);
回答by Spencer
Move the parent div to the middle with
将父 div 移动到中间
left: 50%;
top: 50%;
margin-left: -50px;
Move the second layer over the other with
将第二层移到另一层上
position: relative;
left: -100px;
