html - 如何使按钮在 div 中垂直居中

Question

我想在 div 中居中显示一个按钮。我用以下方法做到了:

transformation:translateY(25%);

但这对于旧版本的浏览器是不允许的。这是 div 和按钮的以下 CSS 代码:

#buttonSwap.swap{
        background: url("../img/thumb_10600.png") no-repeat;
        height: 15px;
        width: 15px;
        border: none;
    }

    .swapCities{
        float: left;
        height: 100%;
        width: 15px;
        margin: 5px 8px 0px 8px;
    }

HTML 代码如下:

<div class="swapCities">
                        <input type="button" id="buttonSwap" class="swap" ng-click="swapingCities()" />
                    </div>  

Answer 1

CSS 中有很多垂直对齐的方法。我推荐阅读 http://css-tricks.com/centering-css-complete-guide/ .

我个人认为“幽灵元素”技术 (http://codepen.io/KatieK2/pen/ucwgi) 最通用。这个想法是在你的容器中添加一个高度为 100% 的内联 block 伪元素，将你的按钮显示也设置为内联 block ，并在两者上设置 vertical-align: middle:

.swapCities:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

#buttonSwap {
  display: inline-block;
  vertical-align: middle;
}