Question

是否可以在不知道容器高度的情况下使中心垂直？

我试过显示：内联块和垂直对齐：中间，它不起作用。我做错了什么？

HTML：

<div class="wrap">
    <div class="red1"></div>
    <div class="red2"></div>

    <div class="text">
        first<br>
        second<br>
        third<br>
        forth
    </div>
</div>

CSS：

.wrap{
    position:absolute;
    top:10px; left:10px;
    width:200px;
    text-align:center;
    background:grey;
}

.red1, .red2{
    position:absolute;
    width:20px; height:20px;
    display:inline-block; /* ? */
    vertical-align: middle; /* ? */
    background:red;
}

.red1{
    left:0px;
}
.red2{
    right:0px; top:0px;
}

Answer 1

假设您想要将红色框垂直居中，是的，这是可能的。但你确实需要知道那些盒子的高度（你做的）。只需使用以下属性：

top: 50%;
margin-top: -10px; // half the height of the element

演示：http://jsfiddle.net/dSq2n/2/

Answer 2

您正在使用position: absolute;因此使用vertical-align是没有用的，请按照这样做

Demo

.red1, .red2{
    position:absolute;
    width:20px; height:20px;
    background:red;
    top: 50%;
    margin-top: -10px;
}

您还需要从

中删除top: 0;

.red2{
    right:0px;
}

说明：我们在这里做的是，使用top: 50%;将元素降低50％;但这并非完全居中，因此我们使用-10px;减去margin-top，{{1}}是要垂直居中的元素总高度的1/2

Answer 3

用于此 Css

.red1, .red2{
    position:absolute;
    width:20px; height:20px;
    top:50%;margin-top:-10px;
  margin-top:-10px;
    background:red;
}
.red1{left:0;}
.red2{right:0;}

删除 display inline-block

<强> Demo

Answer 4

这里是解决方案尝试这个检查这个小提琴http://jsfiddle.net/sarfarazdesigner/dSq2n/6/

.red1, .red2{
    position:absolute;
    width:20px; height:20px;
    display:block; /* how you want to display */
    top:50%; /* give position from top */
    margin-top:-10px; /* put  minus margin from top formula is total height/2 */
    background:red;
}

.red1{
    left:0px;
}
.red2{
    right:0px;
}

Answer 5

您无法使用position:absolute，然后说vertical-align:middle

中心垂直而不知道容器的高度

5 个答案: