如何在div中垂直居中

I want to display a button centered inside a div. I did it with the following:

我想显示一个以div为中心的按钮。

transformation:translateY(25%);

but this is is not allowed for older version of browsers. This is the follwing CSS code for the div and the button:

但这是不允许使用旧版本的浏览器。下面是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;
    }

and the HTML code is the following:

HTML代码如下:

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

4 个解决方案

#1

There is a lot of methods for vertical alignment in CSS. I recommend reading http://css-tricks.com/centering-css-complete-guide/.

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

Personally I find the "ghost element" technique (http://codepen.io/KatieK2/pen/ucwgi) most universal. The idea is to prepend an inline-block pseudoelement with 100% height to your container, set your button display to inline-block as well and set vertical-align: middle on both:

我个人认为“幽灵元素”技术(http://codepen.io/KatieK2/pen/ucwgi)最为普遍。其思想是在容器的高度为100%的内嵌段伪元素之前，将按钮显示设置为内嵌段，并设置垂直对齐:两者都在中间:

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

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

#2

You need something like this:

你需要这样的东西:

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

#3

Here is a simple example: the key here is that the parent container is position:relative, and the button is position:absolute;

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

you can use top:50%; left:50%;... this will align the top-left corner of the button to center;

你可以用:50%;左:50%;…这将使按钮的左上角与中心对齐;

To complete the centering, you need to add margin to the button to equal half of the width and height.

要完成定心，您需要向按钮添加空白，使之等于宽度和高度的一半。

Copy/Paste the below into an .html document, and you will see it at work.

将下面的内容复制/粘贴到.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>

#4

-1

You could use position: absolute; then top: 50% property to offset.

你可以用位置:绝对;然后top: 50%的属性来抵消。

Have a look at this Codepen to see if it's any good for you: EXAMPLE HERE

看看这个Codepen，看看它是否对你有好处:比如这里?

Your css will look like this:

您的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;
}

#1