Question

通常我垂直居中一个按钮，位于绝对定位的div top:50%和margin-left:-(height/2)内，但今天我意识到它并不完美，或者我不知道如何正确使用它。 / p>

例如，我做了两个例子。在第一个示例中，<a>标记是内联元素，在第二个示例中，它是block元素。使用block元素的定位是完美的，但不幸的是宽度是100％。

请解释为什么第二个示例效果很好，display:block;？

我对您的跨浏览器解决方案非常感兴趣。你怎么做这个简单的东西？

这是我的css：

.container {
    height:240px;
    position:relative;
}

.box {
    width:200px;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background:yellow;
    text-align:center;
    padding:20px;
}

#example2 { left: 250px; }

.btn {
    display:inline-block;
    padding:5px 12px;
    line-height:34px;
    color:#fff;
    background:red;
    position:relative;
    top:50%;
    margin-top:-17px;
}

#example2 .btn { display:block; }

..和html

<div class="container">
    <div id="example1" class="box">
        <a href="" class="btn">button</a>
    </div>
    <div id="example2" class="box">
        <a href="" class="btn">button</a>
    </div>
</div>

在线版本可在http://jsfiddle.net/79hqgabq/2/

获取

Answer 1

您看到的对齐问题是由margin-top: -17px行引起的.btn行所导致的，display: flex类已删除该行：Updated Demo

另一方面，对于旧的CSS选择器，垂直对齐是个问题，除非您需要支持旧版浏览器，否则最好转换到Flexbox。

以下是新.box选择器和相应子选择器的问题：Demo w/ Flexbox。这消除了强调必须像素软糖以获得适当的垂直对齐。

新.box { width:200px; height:100%; position:absolute; left:0; top:0; background:yellow; text-align:center; padding:20px; /* New lines for alignment */ display: flex; align-items: center; justify-content: center; }课程

.btn

新.btn { display:inline-block; padding:5px 12px; line-height:34px; color:#fff; background:red; }课程（刚删除旧标签）

display:block

编辑：在研究块元素后，属性将扩展到父容器的100％。这可以更详细地解释here。这就是.box div扩展到display: inline-block类的填充之前的原因。

要回答baseline元素略微错位的原因，因为默认情况下它会在vertical-align: top上对齐。请参阅here以供参考。将div的垂直对齐方式更改为vertical-align: middle将解决此问题。

以下是新的fiddle，它使用之前添加的{{1}}属性的所有语法。

垂直对齐绝对定位div中的按钮

1 个答案: