html - 将对象附加到居中div的侧面

Question

我想在内容的居中栏将徽标附加到其左上角的外部，如this fiddle所示。

HTML：

<div>
    I'm centered
    <div>
        I'm glued to the centered div
    </div>
</div>

CSS：

div
{
  background-color: pink;
  width: 300px;
  height: 400px;
  margin: 0 auto;
  position: relative;
}
div div
{
  width: 100px;
  height: 100px;
  background-color: cyan;
  left: -100px;
  top: 0px;
  position: absolute;
}

我对自己的解决方案不满意，因为似乎无法将内容和显示分离–在我的情况下，青色框是徽标，粉红色框是内容。我不能同时为内容和徽标创建包装div，因为它是我要居中的内容，而不是内容和徽标。

有没有更清洁的方法？

Answer 1

您可以使用css属性display: flex

像这样：

的HTML

<div class="container">
  <div class="content">
    <div class="logo"></div>
  </div>
</div>

的CSS

.container {
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.content
{
  background-color: pink;
  width: 300px;
  height: 400px;
}
.logo
{
  width: 100px;
  height: 100px;
  background-color: cyan;
  left: -100px;
  position: relative;
}

除非我不明白是什么问题。