【问题标题】:Center DIV Horizontally and Vertically水平和垂直居中 DIV
【发布时间】:2015-08-29 05:12:57
【问题描述】:

我有这个 HTML 结构:

<div class="metaboxdet">
    <div class="metd">
        <h1>Hello World!</h1>
    </div>
</div>

http://jsfiddle.net/fvueL00n/2/

这里的问题是我无法将 div“metd”水平和垂直居中。我尝试调整顶部、底部、左侧和右侧,但它返回的结果不太准确。有没有办法让我可以动态地水平和垂直居中。

请查看fiddle here 以查看它的实际效果。谢谢!

【问题讨论】:

  • This 应该有助于垂直对齐。

标签: html css alignment centering


【解决方案1】:

您可以使用表格布局(您还应该将display:table; 应用于.metaboxdet 容器):

.metd {display:table-cell;vertical-align:middle }

JSFiddle

【讨论】:

  • 嘿@suslov,您的代码在 JSFiddle 中完美运行!谢谢。只是一个简单的问题,它可以在不同的浏览器中工作吗?它在 chrome 中完美运行,但在 Firefox 中却不行。只有我有问题吗?这是链接。 alphaomega.bendaggers.com
  • @SaraAriadneFontana:这有点奇怪,在 Safari 中运行良好(问题是由于 height 属性,容器没有完全占据高度)。
【解决方案2】:

您可以使用flexbox,但它不支持older browsers

.metaboxdet {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

供应商前缀留给读者添加以确保完整性。

【讨论】:

  • 那是我没听说过的。弹性盒。
  • 您可以通过我添加到答案中的链接开始使用 flexbox。
【解决方案3】:

As discussed in this answer,你可以用height:100%display:inline-blockvertical-align:middle添加一个辅助元素,用vertical-align:middle把容器改成display:inline-block

.helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
/*container*/
.metd{
    vertical-align:middle;
    display:inline-block;
}

Here's the code in action

【讨论】:

    【解决方案4】:

    将您的标记编辑为:

    <div style="display:table;" class="metaboxdet">
      <div style="display:table-cell;vertical-align:middle;" class="metd">
        <div style="margin-left:auto;margin-right:auto;">
            <h1>Hello World!</h1>
        </div>
      </div>
    </div>
    

    并且你的 css 没有改变,你可以删除不需要的 css:

    .metaboxdet {
        height: 100%;
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        z-index:9;
        text-align:center;
        margin:0px auto;
        background-color: #292484;
        background-image: linear-gradient(135deg, #292484, #dc4225);
        opacity: 0.6;
    }
    
    .metd {position:relative; margin:0px auto; width:70%; }
    .metd h1 {color: #FFF; font-size:40px; font-style:italic; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); line-height:1.2em;}
    

    或检查这个我已经编辑过你摆弄这个

    https://jsfiddle.net/fvueL00n/2/

    如果你不想要那个额外的 div,你也可以直接在 div 中对齐 h1

    更多信息请参考howtocenterincss.com

    【讨论】: