在父元素上显示文本对齐中心，在子元素上显示内联块。这将居中所有的东西。我相信这叫做“块浮动”。

<div class="outer">
 <div class="inner"> some content </div>
</div><!-- end outer -->

<style>
div.outer{
 width: 100%;
 text-align: center;
}
div.inner{
 display: inline-block;
 text-align: left
}
</style>

这也是一个很好的选择浮动，祝你好运!

博士tl;

垂直对齐middle可以，但是你必须在父元素上使用table-cell，在子元素上使用inline-block。

这个解决方案在IE6和ie7中不起作用。你的方法比较安全。但既然你用CSS3和HTML5标记了你的问题，我想你不介意使用现代解决方案。

经典的解决方案(表格布局)

这是我最初的答案。它仍然可以正常工作，并且是得到最广泛支持的解决方案。表格布局会影响你的渲染性能，所以我建议你使用一种更现代的解决方案。

这里有一个例子

测试:

FF3 + 5。 FF4 +。 Safari 5 + Chrome 11 +。 IE9 +。

HTML

<div class="cn"><div class="inner">your content</div></div>

CSS

.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px; height: 200px;
}

现代解决方案(转换)

由于转换得到了很好的支持，现在有一种更简单的方法来实现它。

CSS

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

演示

♥我最喜欢的现代解决方案(flexbox)

我开始越来越多地使用flexbox，它现在也得到了很好的支持，这是迄今为止最简单的方法。

CSS

.cn {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Demo

更多的例子和可能性: 比较一个页面上的所有方法

另一种方法是使用转换转换

外部Div必须将其位置设置为相对或固定，内部Div必须将其位置设置为绝对，顶部和左侧为50%，并应用transform: translate(-50%， -50%)。

div.cn { 位置:相对; 宽度:200 px; 身高:200 px; 背景:灰色; text-align:中心; ｝ div.inner { 位置:绝对的; 上图:50%; 左:50%; 宽度:100 px; 身高:100 px; -webkit-transform (-50%， -50%); 转换:翻译(-50%，-50%); 背景:红色; ｝ < div class = " cn”> < div class = "内部" > 测验 < / div > < / div >

测试:

Opera 24.0(最低12.1) Safari 5.1.7(最少4个带-webkit-前缀) Firefox 31.0(最低3.6带-moz前缀，最低16不带前缀) Chrome 36(最少11个带-webkit前缀，最少36个不带前缀) IE 11, 10(最小9个带-ms前缀，最小10个不带前缀) 更多浏览器，我可以使用吗?

垂直对齐任何只需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'属性的值，只要元素的父元素具有高度或一些扩展其垂直大小的内容。

在这里输入图像描述100%它工作

.div1{
  height: 300px;
  background: red;
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}
.div2{
  background: green;
  height: 100px;
  width: 100%;
}

    <div class="div1">
      <div class="div2">
      sdfd
      </div>
    </div>

https://jsfiddle.net/Mangesh1556/btn1mozd/4/

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

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