Question

我想知道如何使Div Box居中并相对于背景图像，从而使其保持响应状态？ div框应位于白色框内。例如。 http://sendvid.com/t4d85cqe

body{
  font-family: 'Roboto Mono', monospace;
  background-image: url("assets/handheld_bg_white.png");
  background-size: cover;
  background-repeat: no-repeat;
}

.overlay-box {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index: 1000;
}

谢谢。：）

Answer 1

您没有提到是否需要纯CSS，但是如果您能够使用Bootstrap 4，则可以按以下步骤进行操作：

<div class="d-flex justify-content-center align-items-center">
    <div>
        Hello world
    </div>
</div>

Answer 2

我会检查一下flexbox CSS，这对于使事物与其他有用位的音调在垂直和水平方向上居中真的很有好处。

Flexbox适用于位置非常重要的建筑设计，并有助于保持一致性。

This tutorial is a good starting point。

在下面找到一个非常相似的示例的示例，因此您可以将其应用于自己的示例。（它首先垂直居中，然后水平居中back-ground的中心）。

.back-ground {
  height: 150px;
  width: 150px;
  display: flex;
  background: #FF0000;
  flex-direction: column;
  justify-content: center;
}

.box {
display: flex;
justify-content: center;
}

.text {
 color: #FFFFFF;
}

<div class="back-ground">
    <div class="box">
        <span class="text">x</span>
    </div>
</div>

Answer 3

您可以在CSS中使用“ display：flex”，“ justify-content：center”和“ align-items：center”属性来执行此操作。这是一个小提琴https://jsfiddle.net/yr510dcb/，下面是一些代码示例：

body{
  font-family: 'Roboto Mono', monospace;
  background-image: url("assets/handheld_bg_white.png");
  background-size: cover;
  background-repeat: no-repeat;
}

.background {
  display: flex;           /* establish flex container */
  justify-content: center; /* center items vertically */
  align-items: center;     /* center items horizontally */
  height: 50vw;
  width: 80vw;
  padding: 20px;
  margin: 20px;
  background-color: blue;
  position:relative;
  z-index: 100;
  
}

.overlay-box {
  display: flex;           /* establish flex container in case its content needs to be centered */
  justify-content: center; /* center items vertically in case its content needs to be centered */
  align-items: center;     /* center items horizontally in case its content needs to be centered */
  margin: 0 auto;
  height: 25vw;
  width: 25vw;
  background-color: white;
  position:relative;
  z-index: 1000;
  position:relative;
}

<div class = "background">
  <div class = "overlay-box">
  </div>
</div>

您可以在父div（在本例中为“背景”）中使用这些属性来使其内容居中-子div（“覆盖框”）。我还在子级中添加了“ flex”和“ center”属性，因此其内容再次居中，但是您可以删除它而不会影响“ overlay-box”本身的居中。

如果您有背景图片，则可以将图片包装在父div内，例如

<div class = "background">
  <img src="/image.png" class="responsive">  /* image location - in this case a local image */
  <div class = "overlay-box">
  </div>
</div>

并在css中添加一个响应类，以使其具有响应性和父级的大小：

.responsive {
  width: 100%;
  height: auto;
}

将相对div居中于背景图像

3 个答案: