如何垂直居中？

I have a div that I want to center horizontally and vertically.

我有一个div想要水平和垂直居中。

For the horizontal issue everything is great, but I have a problem with the vertical alignment.

对于横向问题，一切都很好，但是我对垂直对齐有问题。

I tried this:

我试过这个：

#parent {
    display: table;
}

#child {
    display: table-row;
    vertical-align: middle;
}

but this doesn't work.

但这不起作用。

4 个解决方案

#1

If you only have to support browsers that support transform (or its vendor prefixed versions), use this one weird old trick to vertically align elements.

如果您只需要支持支持转换的浏览器（或其供应商前缀版本），请使用这个奇怪的旧技巧来垂直对齐元素。

#child {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

If you have to support older browsers, you can use a combination of these, but they can be a pain due to the differences in rendering block vs table.

如果你必须支持旧的浏览器，你可以使用这些浏览器的组合，但由于渲染块与表的不同，它们可能会很痛苦。

#parent {
    display: table;
}

#child {
     display: table-cell;
     vertical-align: middle;
}

If your height is fixed and you need to support those really old, pesky browsers...

如果你的身高是固定的，你需要支持那些非常古老，讨厌的浏览器......

#parent {
   position: relative;
}

#child {
   height: 100px;
   position: absolute;
   top: 50%;
   margin-top: -50px;
}

If your height is not fixed, there is a workaround.

如果您的身高不固定，则有一种解决方法。

See it on jsFiddle.

在jsFiddle上看到它。

#2

Having the parent property as, display:table and child property as display: table-cell and vertical-align: middle worked for me.

将parent属性作为display：table和子属性显示为：table-cell和vertical-align：middle为我工作。

#3

First off, treating non-table markup as tables (with display:table and friends) isn't cross-browser. I don't know which browsers you need to support but certainly IE6 won't do this. But, if your targeted browser do all support display:table I can give you some tips.

首先，将非表标记视为表（带有display：table和friends）不是跨浏览器。我不知道你需要支持哪些浏览器，但肯定IE6不会这样做。但是，如果你的目标浏览器都支持显示：table我可以给你一些提示。

The vertical centering approach you're looking for (using table layout) depends on having a TD with vertical-align:middle, then inside of that a single block element will vertically center. So I think what you want is:

您正在寻找的垂直居中方法（使用表格布局）取决于具有垂直对齐的TD：中间，然后在内部，单个块元素将垂直居中。所以我认为你想要的是：

#parent { display:table-cell; vertical-align:middle; }
#child { /* nothing necessary, assuming it's a DIV it's already display:block */ }

It's ok to use table-cell with no surrounding table-row and table, the browser infers the needed table wrapping elements for you.

可以使用没有周围表格行和表格的表格单元格，浏览器会为您推断出所需的表格包装元素。

#4

here is another way when you don't know the inner div size or whatever, you may use % here and there to fix the "centering" ....

这是另一种方式，当你不知道内部div大小或其他什么时，你可以使用％在这里和那里来修复“居中”....

the idea is that your top value is half the height of your child element as to create the centering illusion

我们的想法是，您的最高值是您的子元素高度的一半，以创建居中幻觉

Here's the code:

这是代码：

<div id="parent">
    <div id="child">
            hello
    </div>
</div>

and for the styling:

并为造型：

#parent {
   position: relative;
    height: 300px;
    width:200px;
    background-color:green;
}

#child {
   height: 50%;
   width: 50%;
    position:relative;
    top:25%;
    left:25%;
   background-color:red;
}

Here you can see it in action http://jsfiddle.net/Wabxv/

在这里你可以看到它在行动http://jsfiddle.net/Wabxv/

#1