如何垂直和水平居中一个未知高度的div

Question

我尝试使用flexbox方法，表格方法和其他一些方法垂直居中一个未知高度的div，但我的div没有正确居中。 我希望居中div的宽度为窗口宽度的50％或最小宽度为200px。

 .content { background-color: violet; min-width: 200px; width: 50%; margin-left: auto; margin-right: auto; box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 1); } .outer-container { display: table; width: 100%; background-color: violet; } .container { display: table-cell; text-align: center; vertical-align: middle; }

 <body> <div class="outer-container"> <div class="container"> <div class="content"> <div class="title-class"> Hello there </div> </div> </div> </div> </body>

Answer 1

使用flexbox，这里是您需要的所有代码：

HTML

<div class="container">
    <div class="content">
        <div class="title-class">Hello there</div>
    </div>
</div>

CSS

html, body { height: 100%; }

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: violet;
    height: 100%;
}

.content {
    background-color: violet;
    width: 50%;
    text-align: center;
    box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 1);

}

DEMO

作为替代方案，这是表方法：

如何垂直，水平或两者中心元素

如何垂直和水平居中一个未知高度的div

问题描述

1 个解决方案

解决方案1
5 已采纳 2015-09-02 01:26:17

如何垂直和水平居中一个未知高度的div

问题描述

1 个解决方案

解决方案1 5 已采纳 2015-09-02 01:26:17

解决方案1
5 已采纳 2015-09-02 01:26:17