通常，我会在top:50%，和绝对定位的div内垂直居中放置一个按钮，margin-left:-(height/2)但是今天我意识到它并不完美，或者我不知道如何正确使用它。
例如，我做了2个例子。在第一个示例中，<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/获得。
您看到的对齐问题是margin-top: -17px由此更新的小提琴所看到的行引起的，而在.btn该类上删除了该行：更新的演示
另外，垂直对齐对于旧的CSS选择器来说是成问题的，除非您需要支持旧的浏览器，否则过渡到Flexbox是一个好主意。
这是新display: flex选择器和相应子选择器的问题：带Flexbox的演示。这消除了必须进行像素软化以获得正确的垂直对齐的重点。
新.box班
.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;
}
编辑：研究块元素后，该属性具有可扩展到父容器的100％的属性。这可以在这里更详细地说明。这就是display:blockdiv扩展直到到达.box类中的填充的原因。
回答为什么display: inline-block元素稍微未对齐的原因是，默认情况下元素在上对齐baseline。请参阅此处以供参考。更改div的垂直对齐方式vertical-align: top将解决此问题。
这是新的小提琴，仅将其以前的语法与添加的vertical-align: middle属性一起使用。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句