如何使 html 元素的 div 垂直和水平宽度导航栏居中答案

【问题标题】：How to center a div or html element vertically and horizontally wifth navbar如何使 html 元素的 div 垂直和水平宽度导航栏居中
【发布时间】：2022-12-31 01:57:09
【问题描述】：

我正在使用 react 和 bootstrap 然后我尝试将 html 元素居中到页面（页面中间）并且它完成了但是在将导航栏添加到页面之后 html 元素没有正确居中（滚动条也来了）。

这是html标签的结构：

<div>
<nav>navbar content</nav>
<div>...</div>
<div>..</div>
<div>.</div>
</div>

我正在使用 bootstrap 并尝试使用一些 css 来到达 html 元素并使其居中（在这种情况下，我将 html 表单元素居中）。

CSS:

display: flex
justify-content: center
align-items: center
height: 100vh

The image shows that the html element is centered

我希望将 html 元素中心垂直和水平地放置到包含导航栏的页面

添加导航栏后（我不熟悉 css 或 bootstrap）这就是我得到的

Image shows html element not centered after adding navbar

【问题讨论】：

标签： html css reactjs twitter-bootstrap

【解决方案1】：

一个好的开始是了解 html 的“布局”内容的分布。

从中您可以了解到导航“菜单”、主要内容“内容”有一个定义的部分。

在以下链接中有很好的文档。

https://www.w3schools.com/html/html_layout.asp

【讨论】：