故障设置元件垂直居中

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固定在位置设置 position 为absolute

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.