如何在div中将div居中[重复]

Question

此问题已经在这里有了答案：

CSS center text (horizontally and vertically) inside a div block（23个答案）

Flexbox: center horizontally and vertically（11个答案）

How to Vertical align elements in a div?（28个答案）

关闭4分钟前。

<a href="" class="header-logolink">
    <div>
        <img class="header-logoimage" src="~/images/SummerFling-logo.jpeg" alt="Summer Fling"/>
    </div>
    <div>
        <div>
            <h1 class="header-logotext">Summer Fling</h1>
        </div>
    </div>
</a>


.header-logolink {
    height: 100%;
    display: inline-block;
    width: 100%;
}

.header-logolink div:nth-child(1) {
    float: left;
    width: 30%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.header-logolink div:nth-child(2) {
    float: right;
    width: 70%;
    display: table;
}

.header-logolink div:nth-child(2) div:nth-child(1) {
    display: inline-block;
    width: 100%;
}

.header-logotext {
    font-size: 3.5vw;
}

我正在尝试将文本放在其父div的中心，但是我无法弄清为什么我在网上找到的方法不起作用。如何在div内水平和垂直放置标题文本？

Answer 1

您是否尝试将text-align: center和justify-content: center添加到div？

有时，可以使用不同的背景色来填充div以查看其实际位置。很多时候，我发现我的div不在我最初认为的位置。

Answer 2

如果您必须将文本居中放置在图像中间，只需将图像宽度设置为100％或将其水平居中，否则它将停留在页面的左侧。

要使所有内容垂直居中，只需使用flexbox！您不需要所有的CSS

.header-logolink {
    width: 100%;
    height:100vh;
    text-align:center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

Fiddle