Html 使用引导4在flex fill内垂直和水平居中放置一个div_Html_Css_Bootstrap 4

Html 使用引导4在flex fill内垂直和水平居中放置一个div

html css bootstrap-4

Html 使用引导4在flex fill内垂直和水平居中放置一个div,html,css,bootstrap-4,Html,Css,Bootstrap 4,大家好，我使用的是bootstrap 4，我在下面使用的框架很好，因为我的所有页面都是从顶部开始的，但现在我正在尝试将元素居中 <style> body, wrapper { min-height: 100vh; } </style> <body> <wrapper class="d-flex flex-column"> <nav>

大家好，我使用的是bootstrap 4，我在下面使用的框架很好，因为我的所有页面都是从顶部开始的，但现在我正在尝试将元素居中

<style>
    body,
    wrapper {
        min-height: 100vh;
    }

</style>

<body>

    <wrapper class="d-flex flex-column">
        <nav>
            
        </nav>
        <main class="flex-fill">
            <div class="container-fluid">
                THIS IS THE DIV IM ATTEMPTING TO CENTER
            </div>
        </main>
        <footer>
            
        </footer>
    </wrapper>



</body>


身体，
包装纸{
最小高度：100vh；
}
这是我试图调到中间的分区

我曾尝试使用top来尝试改变位置，但效果并不理想，但我确实通过使用带有vh值的margin top来改变位置，但在不同的屏幕大小上没有响应，我希望任何人都能帮助我以响应方式解决此问题，我已经成功地使用“行对齐资源中心”将div水平居中，但我无法将div垂直居中。谢谢

基本上这已经完成了

要对齐main的内容，请将其设置为

d-flex

容器，然后使用

align items center

<wrapper class="d-flex flex-column min-vh-100">
    <nav>
        nav
    </nav>
    <main class="flex-fill d-flex align-items-center">
        <div class="container-fluid text-center"> THIS IS THE DIV IM ATTEMPTING TO CENTER </div>
    </main>
    <footer>
        footer
    </footer>
</wrapper>


导航
这是我试图调到中间的分区
页脚

注意：

d-flex

的默认方向是

flex方向：行

，因此

align items:center

将垂直对齐。若要在

弹性方向：列中垂直居中，您将使用调整内容：居中
基本上这样做
要对齐main的内容，请将其设置为d-flex
容器，然后使用align items center

<wrapper class="d-flex flex-column min-vh-100">
    <nav>
        nav
    </nav>
    <main class="flex-fill d-flex align-items-center">
        <div class="container-fluid text-center"> THIS IS THE DIV IM ATTEMPTING TO CENTER </div>
    </main>
    <footer>
        footer
    </footer>
</wrapper>


导航
这是我试图调到中间的分区
页脚


注意：d-flex
的默认方向是flex方向：行
，因此align items:center
将垂直对齐。要在flex direction:column
中垂直居中，您可以使用justify content:center