垂直居中的div项目在另一个div

只需将容器设置为display:table，然后将内部项设置为display:table-cell。在容器上设置高度，然后在内部项目上设置垂直对齐:中间。早在IE9时代，它就具有广泛的兼容性。

请注意，垂直对齐将取决于父容器的高度。

. cn ｛ 显示:表; 身高:80 px; background - color: # 555; ｝ 在 ｛ 显示:表格单元; vertical-align:中间; 颜色:# FFF; padding-left: 10 px; padding-right: 10 px; ｝ < div class = " cn”> <div class="inner">Item 1</div> <div class="inner">Item 2</div> < / div >

我已经使用以下解决方案一年多了，它也适用于IE 7和8。

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

使居中:使垂直和水平对齐:

#parentDiv{
    display:table;
    text-align:center;
}

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

垂直对齐任何只需3行CSS

HTML

<div class="parent-of-element">

    <div class="element">
        <p>Hello</p>
    </div>

</div>

简单的

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

CSS

.parent-of-element {
   position: relative;
   height: 500px;
   /* or height: 73.61% */
   /* or height: 35vh */
   /* or height: ANY HEIGHT */
}

.element {
  position: absolute;
  top: 50%;

  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

根据shouldiprefix，这是你唯一需要的前缀

您还可以使用%作为.parent-of-element的'height'属性的值，只要元素的父元素具有高度或一些扩展其垂直大小的内容。

当你的高度没有设置(自动);你可以给内部div一些填充(顶部和底部)，使它垂直居中:

<div>
    <div style="padding-top:20px;padding-bottom:20px">
    <!--content-->
    </div>
</div>

这对我很有用。可以定义外部div的宽度和高度。

代码如下:

.outer { 位置:相对; text-align:中心; 宽度:100%; 身高:150 px;//允许任何高度，也在%中。 背景:灰色; ｝ .outer > div:first-child { 位置:绝对的; 上图:50%; 左:50%; 宽度:100%; -webkit-transform (-50%， -50%); -ms-transform: -50%， -50%; 转换:翻译(-50%，-50%); 背景:红色; ｝ < div class = "外" > < div class = "内部" > 把你的文本或div内容放在这里! < / div > < / div >