Html 将对象附着到居中div的侧面

我想要一个以内容为中心的列，在左上角的外侧附加徽标，如中所示

HTML:

我对自己的解决方案不满意，因为这似乎是内容和表示分离的失败——在我的例子中，青色框是一个徽标，粉色框是内容。我不能同时为内容和徽标创建包装器div，因为我希望它是以内容为中心的，而不是将内容和徽标放在一起

---

有更干净的方法吗？

您可以使用css属性display:flex

像这样：

HTML

---

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

可能重复@NilsSchlüter的答案很好，确实回答了我写的问题，但在我的例子中，有两件事需要集中在一列中——内容和上面的导航栏。我可以把它们放在包装器中，但那是更多的非语义标记。我不明白你为什么对自己的解决方案不满意，它对我来说很好。@AminJafari也许是我。我同意所选的答案。这可能是违法行为，但实际上并不重要。别紧张，我的朋友：

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

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 class="container">
  <div class="content">
    <div class="logo"></div>
  </div>
</div>

.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;
}