如何在html div中创建垂直居中的html链接按钮

Question

我经历了很多这方面的事情。但仍然找不到任何解决方案。 在每种解决方案中都存在一些限制。任何人都可以为我的问题提供一个通用的，简单的css代码，将一个html链接按钮垂直放在div中心吗？

如下图所示，创建帐户按钮位于div google标题栏的中间位置:)

Answer 1

您可以组合display：table-cell和vertical-align：middle

<div style="display:table-cell; vertical-align:middle; height:50px; width:200px; background-color:silver;" >
  <a href="#link">
    <img src="" />
  </a>
</div>

Answer 2

您需要将line-height设置为height，同时设置display: inline-block

这是fiddle。

如果你正在使用sass，那么很容易编写一个mixin（以sass格式）：

=button($height: 40px)
  height: $height
  line-height: $height

Answer 3

只需适当设置高度和边距。

sample fiddle

<div id="a">
    <div id="b">bbb</div>
    <div id="c">ccc</div>
</div>

#a {
    overflow: auto;
    background-color: yellow;
    height: 100px;
}
#b {
    height: 80px;
    background-color:red;
    width: 50px;
    float: left;
    margin-top: 10px;
}
#c {
    height: 50px;
    background-color: blue;
    width: 80px;
    float: right;
    margin-top: 25px;
}

Answer 4

我做了很多这样的伎俩：

.valign-content:before {
   content : ''; 
   display : inline-block; 
   width : 0; height : 100%; 
   vertical-align : middle; 
}

.valign-content>* { 
   vertical-align : middle; 
   display : inline-block; 
}

继承人演示：http://jsfiddle.net/pavloschris/5g3Cz/

我的诀窍......