html - 带有 flex bootstrap 的中心元素

Question

虽然我讨厌 css，但我必须使用它

我正在尝试使用 flex 将元素居中，这被宣传为简单的解决方案。现实是它不起作用。

我做错了什么？我希望图像 Logo 在宽度和高度上正好位于页面中间，正好位于中间。

指南说你必须证明和对齐中心。

这是我的 codepen

另一个简化的代码笔:HERE 代码:

HTML

<div class="maindiv d-flex">
    <div class="mainlogo justify-content-center align-items-center">
        <img id="fadinglogo" class="mainlogo justify-content-center align-items-center" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/The_Venus_Project_logo_image.png/600px-The_Venus_Project_logo_image.png"/>
    </div>
</div>

CSS

/*DEFAULT MVC PROJECT CSS*/
html body {
  padding-top: 50px;
  padding-bottom: 20px;
  width: 100%;
  height: 100%; }

/* Set padding to keep content from hitting the edges */
.body-content {
  padding-left: 15px;
  padding-right: 15px; }

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
  white-space: normal; }

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
  max-width: 280px; }

/*BEGINNING CUSTOM SASS*/
.maindiv * {
  width: 100%;
  height: 100%; }

#fadinglogo {
  width: auto; }

我错过了什么？

Answer 1

这就是你做错的地方。显示 flex 及其 flex 属性应应用于同一父级，但您已将 flex 应用于“mainDiv”并将其属性应用于“mainlogo”div。

这是修复。

.maindiv{//display:flex;}
.mainlogo{display:flex;
justify-content:center;
align-items:center;}

更改高度值使其在代码笔中准确居中。

https://codepen.io/Harsh89/pen/RYeWvX