Question

我对以下CSS设置有疑问：

如何将元素垂直居中设置？

.cycle-overlay { position:absolute; top:0; left:0; }

Answer 1

执行此操作的常用方法是将对象从顶部取50％，然后将对象宽度的50％边距缩回：

.cycle-overlay{

 position: absolute;
 left: 0px;
width: 100%;

top: 50%;

height: (for example) 100px;

margin-top: (-height/2 that means:) -50px;

}

如果您希望将DIV固定在将位置设置为绝对

的位置

Answer 2

像这样使用。您需要使用div高度的一半指定负margin-top。在这里，我假设您的div的高度为200px。

.cycle-overlay { position:absolute; top:50%; left:0; margin-top:-100px; }

Answer 3

首先，您需要为absolute positioned元素设置高度，使其垂直对齐中间

.cycle-overlay{
   position:absolute;
   top:0;
   bottom:0;
   right:0;
   left:0;
   margin:auto;
   height:20px;
}

NOTE: TOP, LEFT, RIGHT and BOTTOM accepts only numeric values.

麻烦设置元素垂直居中

3 个答案: