这在我的情况下有效（仅在现代浏览器中测试）：

.textthatneedstobecentered {
  margin: auto;
  top: 0; bottom: 0;
}

垂直和水平居中

HTML

<div id="dialog">Centered Dialog</div>

CSS

#dialog {
    position:fixed; top:50%; left:50%; z-index:99991;
    width:300px; height:60px;
    margin-top:-150px;  /* half of the width */
    margin-left:-30px; /* half of the height */}

享受

只需这样做：在div中添加类：

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

请阅读本文以获得解释。注：高度是必需的。

声明此Mixin：

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

然后将其包含在元素中：

.element{
    @include vertical-align();
}

我觉得这个最有用。。。它给出了最准确的“H”布局，并且非常容易理解。

这种标记的好处是您可以在一个地方定义内容大小->“PageContent”。

页面背景的颜色及其水平边距在其相应的div中定义。

<div id="PageLayoutConfiguration"
     style="display: table;
     position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
     width: 100%; height: 100%;">

    <div id="PageBackground"
         style="display: table-cell; vertical-align: middle;
         background-color: purple;">

        <div id="PageHorizontalMargins"
             style="width: 100%;
             background-color: seashell;">

            <div id="PageContent"
                 style="width: 1200px; height: 620px; margin: 0 auto;
                 background-color: grey;">

                 My content goes here...

            </div>
        </div>
    </div>
</div>

这里用CSS分隔：

<div id="PageLayoutConfiguration">
     <div id="PageBackground">
          <div id="PageHorizontalMargins">
               <div id="PageContent">
                     my content goes here...
               </div>
          </div>
     </div>
</div>

#PageLayoutConfiguration{
   display: table;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0px;
   right: 0px;
   bottom: 0px;
   left: 0px;
}

#PageBackground{
   display: table-cell;
   vertical-align: middle;
   background-color: purple;
}

#PageHorizontalMargins{
   width: 100%;
   background-color: seashell;
}
#PageContent{
   width: 1200px;
   height: 620px;
   margin: 0 auto;
   background-color: grey;
}

仅垂直居中

如果您不关心InternetExplorer6和7，可以使用包含两个容器的技术。

外部容器：

应具有显示：table；

内部容器：

应具有显示：表格单元格；应垂直对齐：中间；

内容框：

应该有显示：inline块；

您可以将任何内容添加到内容框中，而不必考虑其宽度或高度！

演示：

正文{边距：0；}.外部容器{位置：绝对；显示：表格；宽度：100%；/*这可以是任意宽度*/高度：100%；/*这可能是任何高度*/背景：#ccc；}.内部容器{显示：表格单元格；垂直对齐：中间；}.居中内容{显示：内联块；背景：#fff；填充：20px；边框：1px实心#000；}<div class=“outer container”><div class=“内部容器”><div class=“居中内容”>马尔科姆在中间</div></div></div>

另请参见此Fiddle！

水平和垂直居中

如果要水平和垂直居中，还需要以下内容。

内部容器：

文本应对齐：居中；

内容框：

应重新调整水平文本对齐方式，例如文本对齐方式：左对齐；或文本对齐：右；，除非您希望文本居中

演示：

正文{边距：0；}.外部容器{位置：绝对；显示：表格；宽度：100%；/*这可以是任意宽度*/高度：100%；/*这可能是任何高度*/背景：#ccc；}.内部容器{显示：表格单元格；垂直对齐：中间；文本对齐：居中；}.居中内容{显示：内联块；文本对齐：左侧；背景：#fff；填充：20px；边框：1px实心#000；}<div class=“outer container”><div class=“内部容器”><div class=“居中内容”>马尔科姆在中间</div></div></div>

另请参见此Fiddle！