CSS 集中元素

Question

所以我正在学习 css 图形，我正在尝试在 css 中创建此图像：

我已经开始使用 flexbox 来尝试布置我的项目，但后来发现我不能将我的圆圈居中。它还没有响应。我也没有尝试将徽标居中。所有元素都需要保持其纵横比。

有人能告诉我哪里错了吗？

一旦我也将图像居中，我想将橙色和蓝色框制作成按钮。如果可能的话，我会很感激如何覆盖透明按钮。

我已将我的代码放在 codepen 和下面的代码片段中。

*{
 color: #535252;
 font-family: --var(BB_font);
}

body {
 font-size: 15px;
 background-color: #c3c5c8;
}

.title{
 font-size: 5em
}

.image {
 background-repeat: no-repeat;
 background-position: center;
}

.orangeRectangle {
 width: 100%;
 height: auto;
 
 border-top-right-radius: 150px;
 border-bottom-right-radius: 150px;
 z-index: 0;

 background: #ec673e;
}

.blueRectangle {
 width: 100%;
 height: auto;

 border-top-left-radius: 150px;
 border-bottom-left-radius: 150px;
 z-index: 0;

 background: #67b9ce;
}

.rectangleTitle {
 text-align: center;
 font-size: 3em
}

.greyCircle {
 width: 40%;
 height: 40%;
 position: absolute;
 left: 30%;
 top: 25%;
 align-self: center;
 z-index: 5;
 background-color: #535252;
 border-radius: 50%;
}

<!DOCTYPE html>
<html>
<head>
 <title>Landing Page</title>

 <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

 <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

 <link rel="stylesheet" type="text/css" href="BB1.css">
</head>
<body>



<div class="container pt-2">
 <div class="border border-dark d-flex flex-row justify-content-center">
  <h1 class="title">Header</h1>
 </div>
 <div class="border border-dark d-flex flex-row justify-content-center align-items-stretch" style="height: 950px">
  <div class="blueRectangle border-left border-bottom">
   <h2 class="rectangleTitle pt-2">Heading 1</h2>
  </div>
  <div class="orangeRectangle border-left border-bottom border-right">
   <h2 class="rectangleTitle pt-2">Heading 2</h2>
  </div>
  <div class="greyCircle"></div>
 </div>  
 <div class="border border-dark d-flex flex-row justify-content-center align-items-center" style="height: 150px">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam cum iste voluptatibus reprehenderit in dolor veritatis non eveniet at. Suscipit molestiae maxime laboriosam! Ipsa praesentium consectetur ratione quo distinctio iure nulla explicabo quas consequatur, id deserunt ducimus labore error vitae omnis animi facilis harum debitis. Facere architecto impedit eaque excepturi dolorum optio nemo ab! Iusto, vel non veritatis dolorem debitis voluptatum provident omnis commodi perspiciatis velit distinctio! Deleniti, nam aliquid quidem repudiandae voluptates, excepturi aperiam nesciunt quo ad officia impedit. Ipsa eveniet culpa ullam odio amet ea cupiditate consectetur et? Illo, accusamus tempore. Dolor voluptas voluptatum asperiores esse illo eaque.</p>
 </div>
</div>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

</body>
</html>

谢谢

Answer 1

在 Flexbox 中居中

对于 flexbox，居中任何内容的最简单技巧是将包含元素设置为 display: flex; 或 display: inline-flex;，然后添加 align-items: center;（这将使所有内容垂直居中）和 justify-content: center（这是为了水平居中）。

像这样：

* {
  margin: 0;
  padding: 0;
}

.flex-container {
  border: 5px solid red;
  display: flex;
  height: calc(100vh - 10px);
  width: calc(100vw - 10px);
}

.center-everything {
  align-items: center;
  justify-content: center;
}

<div class="flex-container center-everything">
  <strong>center me!</strong>
</div>

保持纵横比

关于保持宽高比，您需要为每个元素定义 height 和 width。如果您需要此布局具有响应性（也就是在放大或缩小尺寸时保持所有纵横比），您可以使用 relative units 来确保您的比例是固定的。

通过包装将元素制作成锚点或按钮

将元素制作成按钮就像将其包装在 <a></a> 或 <button></button> 标签中一样简单，这些标签是内联标签，在用作包装器时应保持您的布局。然后，您可以使用 href、onclick 或 JavaScript 事件侦听器自定义这些 links/buttons 执行的操作（请参阅下面的演示）。如果你搜索其中任何一个，网上有大量资源。

叠加和`position: absolute`

关于叠加，您可以轻松地创建一个叠加元素，方法是将其嵌套在容器中，然后使用 position: absolute 将嵌套元素放置在该容器上（这会将元素从 z-plane 中分离出来，并且使用 position: relative) 相对于容器定位它。您可以将 height 和 width 设置为 100%，因为此嵌套元素现在是相对于其 position: relative 容器的，因此这些设置将确保该元素覆盖整个包含元素。然后，您可以使用 top: 0 和 left: 0 定位元素，这将确保元素与其容器的两侧齐平。

一篇关于此的好文章：https://teamtreehouse.com/community/how-css-position-absolute-brings-the-overlay-element-to-the-front

查看此演示，使用多个半透明颜色叠加层，在 position: relative 容器内使用 position: absolute（带有一些有趣的切换动作）：

const overlayYellow = document.querySelector(".overlay.yellow");
const overlayBlue = document.querySelector(".overlay.blue");
const buttonYellow = document.querySelector(".btn.yellow");
const buttonBlue = document.querySelector(".btn.blue");

buttonYellow.addEventListener('click', () => {
  toggleOverlay('yellow');
});

buttonBlue.addEventListener('click', () => {
  toggleOverlay('blue');
});

function toggleOverlay(color) {
  const overlay = (color === 'yellow') ? overlayYellow : overlayBlue;
  
  if (overlay.classList.contains('hidden')) {
    overlay.classList.remove('hidden');
  } else {
    overlay.classList.add('hidden');
  }
}

* {
  margin: 0;
  padding: 0;
}

.container {
  background: red;
  height: 100vh;
  width: 100vw;
}

.overlay {
  display: block;
  height: calc(100% - 10px);
  left: 5px;
  opacity: 0.5;
  position: absolute;
  top: 5px;
  width: calc(100% - 10px);
  z-index: 1;
}

.overlay.yellow {
  background: yellow;
}

.overlay.blue {
  background: blue;
}

.overlay.hidden {
  display: none;
}

.btn {
  cursor: pointer;
  height: 36px;
  position: absolute;
  right: 12px;
  width: 180px;
  z-index: 2;
}

.btn.yellow {
  top: 12px;
}

.btn.blue {
  top: 60px;
}

<div class="container">
  <div class="overlay yellow"></div>
  <div class="overlay blue"></div>
  <button class="btn yellow">Toggle yellow overlay!</button>
  <button class="btn blue">Toggle blue overlay!</button>
</div>

Answer 2

解决这个问题的最佳方法是制作一个额外的 div 容器。在这个容器内，你有你的背景和带有灰色背景的标志作为一种覆盖。我相应地更新了你的 codepen。

.greyCircle {
    width: 40vh;
    height: 40vh;
    z-index: 5;
    background-color: #535252;
    border-radius: 50%;
}
.circle-container-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  top: 0;
}

.additional-outer-container {
  position: relative;
  height: 950px
}

我建议你看看 How to Center in CSS and A Complete Guide to flexbox。在 css.

中创建布局时，这两个站点是很棒的资源

CSS 集中元素

CSS centralising elements

css

css-position

flexbox

在 Flexbox 中居中

保持纵横比

通过包装将元素制作成锚点或按钮

叠加和position: absolute

叠加和`position: absolute`