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

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>

但我想将两个画布都设置在屏幕中心对齐.如果我将 left 的值设置为常量,而我更改屏幕的方向(就像我在 iPad 上做 aps 一样),画布不会像如何保持在屏幕中间它在

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

有人可以帮忙吗?

推荐答案

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

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;

这篇关于如何将绝对定位的元素对齐到中心?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

wkhtmltopdf print-media-type uses @media print ONLY and ignores the rest(Wkhtmltopdf print-media-type仅使用@media print,而忽略其余内容)
Minify CSS with Node-sass(使用Node-Sass缩小CSS)
How to rotate outer div not inner content(如何旋转外部div而不是内部内容)
how to apply css transform to child on parent hover(如何对父级悬停时的子级应用CSS变换)
Only transition a transform in css?(是否仅在css中转换转换?)
CSS transform doesn#39;t change CSS layout(Css转换不会更改css布局)