如何在将其中一个居中的同时覆盖两个div

Question

我正在学习 HTML 和 CSS 所以我正在尝试模仿 Coder Manual。

我为背景做了一个 div（我现在只使用一种颜色），另一个 div 用于第一个蓝色部分的内容，包括徽标、导航等。 .

但是，如果不使用类似以下内容，我无法让内容 div 覆盖背景 div：

#content {
  position: absolute;
  top: 0;
}

但这使我无法使用 div 将内容居中：

#content {
    width: 50%;
    margin: 0 auto;
}

遇到这种情况怎么办？

编辑：这是 html:

<!DOCTYPE html>
<html>
<head>
    <title>CM</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="content">
        <img alt="Coder Manual" src="https://codermanual.com/wp-content/uploads/2015/01/logo.png">
    </div>
    <div id="blue-div">
            &nbsp;     
    </div>
</body>
</html>

Answer 1

您可以使用 transform 将其居中，如下所示：

1-With position: absolute 在一个已知 width

的元素中

.center{
    height: 40px;
    padding: 20px 0;
    background: #ddd;
    position: relative;
}

.center img{
    position: absolute;
    left: 50%;
    margin-left: -20px; /*the half width */
}

<div class="center">
    <img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" width="40px"  height="40px" alt="LOGO">
</div>

2- 带有 position: absolute 的元素中带有未知的 width

.center{
    height: 40px;
    padding: 20px 0;
    background: #ddd;
    position: relative;
}

.center img{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

<div class="center">
    <img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" width="40px"  height="40px" alt="LOGO">
</div>

3- 垂直居中

.center{
    height: 80px;
    background: #ddd;
    position: relative;
}

.center img{
    position: absolute;
    left: 50%;    
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    
}

<div class="center">
    <img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" width="40px"  height="40px" alt="LOGO">
</div>

Answer 2

就我个人而言，我是这样做的：

.bg {
  width: 100%;
}
.bg-blue {
  background-color: blue;
}
.content {
  text-align: center;
}

<div class="bg bg-blue">
  <div class="content">
    <img alt="Coder Manual" src="https://codermanual.com/wp-content/uploads/2015/01/logo.png">
  </div>
</div>

但如果您需要将 div 分开：

#BgBlue {
  position: absolute;
  top: 0;
  z-index: -1;
  height: 50px;
  width: 100%;
  background-color: blue;
}
.content {
  text-align: center;
}

<div id="BgBlue">
  &nbsp;
</div>
<div class="content">
  <img alt="Coder Manual" src="https://codermanual.com/wp-content/uploads/2015/01/logo.png">
</div>

如何在将其中一个居中的同时覆盖两个div

How to overlay two divs while centering one of them

html

css

css-position