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％高度的内联块伪元素，将按钮显示设置为内联块，并在两者上设置vertical-align: middle：

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

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

Answer 2

你需要这样的东西：

.swapCities{
    display: inline-block;/* or table-cell */
    vertical-align: middle;
}

Answer 3

这是一个简单的例子：这里的关键是父容器是position：relative，而按钮是position：absolute;

你可以使用top：50％; left：50％; ...这会将按钮的左上角对齐到中心;

要完成居中，您需要为按钮添加边距，使其等于宽度和高度的一半。

将以下内容复制/粘贴到.html文档中，您将看到它正在运行。

<!DOCTYPE html>
<html>
<body>
    <style>
        center { background-color:#CCCCCC; position:relative; min-height:600px; }
        button { width:300px; height:30px; position:absolute; top:50%; left:50%; margin-left:-150px; margin-top:15px; }
    </style>
    <center>
        <h2>Content Area</h2>
        <button type="button">Click Me</button>
    </center>
</body>
</html>

Answer 4

您可以使用position: absolute;然后使用top: 50%属性进行抵消。

查看此Codepen以了解它是否对您有益：EXAMPLE HERE

你的CSS会是这样的：

.swapCities{
  position: relative;
  height: 100px; width: 100px;
  margin: 5px 8px 0px 8px;
  border: 1px solid;
}

#buttonSwap.swap{
  position: absolute; 
  top: 50%; margin-top: -9px; 
  left: 50%; margin-left: -9px;
  background: url("../img/thumb_10600.png") no-repeat;
  height: 15px; width: 15px;
  border: 1px solid;
}

如何将div中的按钮垂直居中

4 个答案: