gpt4 book ai didi

html - 如何垂直和水平居中高度未知的div

转载 作者:搜寻专家 更新时间:2023-10-31 23:00:18 25 4
gpt4 key购买 nike

我尝试使用 flexbox 方法、表格方法和其他一些方法将高度未知的 div 垂直居中,但我的 div 没有正确居中。我希望居中 div 的宽度为窗口宽度的 50%,或者最小宽度为 200 像素。

.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>

最佳答案

使用 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

作为替代,这里是表格方法:

关于html - 如何垂直和水平居中高度未知的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32343148/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com