如何将绝对定位的元素与中心对齐?


103

我试图将两个画布堆叠在一起,使其成为双层画布。

我在这里看到了一个例子:

<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>

但是我想将两个画布都设置在屏幕中心。如果我将的值设置left为常数,则当我更改屏幕的方向时(因为我在iPad上做aps),画布将不会像它在屏幕中的行为那样保留在屏幕中间。

<div align="center">

有人可以帮忙吗?

Answers:


222

如果将左右两个都设置为零,并且将左右边距设置为自动,则可以使绝对定位的元素居中。

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

您是否也不需要给元素一个宽度?
加布里埃尔·弗洛里特

1
我认为在这种情况下没有必要。
安德鲁

刚尝试过此方法,它就可以了,应该将其标记为正确答案
R Reveley 2014年

您可以使用更改左或右值将对象移出中心,固定不变。使用left: 80px;会将对象向中心右侧移动40px(!)。
SPRBRN

4
备注:仅在样式元素具有给定的宽度时才有效。(px或%)
Johnny Wong

94

如果要在不知道元素的宽度和高度的情况下使元素居中对齐,请执行以下操作:

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

例:

*{
  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>


16

您是否尝试过使用?:

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

不知道它是否会工作,但是值得一试...

较小的编辑:如Chetan的评论所指出的,添加了左边距部分。


是的,我已经尝试过了,但是画布是从屏幕中间“开始”而不是“放置”的。无论如何,是否要设置left:50%并再次将画布向左移动?
PaulLing 2011年

2
@PaulLingmargin-left: <negative half the width>
Chetan S

白坦说的话..击败了我:P我会编辑后代的回答……
Deleteman

当iPad以不同的方向放置时,屏幕的宽度会有所不同
PaulLing 2011年

他的意思是画布元素的宽度的一半...,这将使其变为margin-left:-50px;
Deleteman


9

试试这个方法,对我来说很好

position: absolute;
left: 50%;
transform: translateX(-50%); 

7

您要做的就是

确保您的父级DIV具有position:relative

和您想要居中的元素,将其设置为高度和宽度。使用以下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/

2
唯一适合我的解决方案。父级设置为伸缩,伸缩增长和溢出。对于大于父图像的图像,将子图像置于框外。它似乎没有意识到父母的宽度。现在已修复。太谢谢了!
2015年

0

将父div移动到中间

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

将第二层移到另一层上

position: relative;
left: -100px;
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.