我无法将我的 <div> 居中，我不明白为什么[重复]答案

【问题标题】：I can´t center my <div> and I don´t understand why [duplicate]我无法将我的 <div> 居中，我不明白为什么[重复]
【发布时间】：2023-03-22 12:30:01
【问题描述】：

我正在尝试使图像居中。

我确信这是一个非常简单的解决方案，但除了从头开始 3 次之外，我还尝试了几种解决方案。

#main_image {
  background-color: bisque;
  position: fixed;
  display: block;
  margin: 0 auto;
}

我已经尝试过 margin: o auto , text-align: center, 相对定位和绝对定位。 https://codepen.io/lordrott/pen/GbJOQo

【问题讨论】：

另见Center a position:fixed element和Center fixed div with dynamic width (CSS)。
"请替换下面的代码这是有效的。你可以在#main_image id中添加left:0和right:0" #main_image { background-color: bisque;位置：固定；显示：块；边距：0 自动；左：0；右：0； }

标签： html css

【解决方案1】：

在#main_image 字段的css文件中将您的位置更改为相对位置。应该可以。

#main_image {
  background-color: bisque;
  position: relative;
  display: block;
  margin: 0 auto;
}

【讨论】：

【解决方案2】：

或者，

#main_image {
  background-color: bisque;
  position: fixed;
  display: block;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

【讨论】：

【解决方案3】：

试试这个，

  #main_image{
       position: relative;
       left: 300px;
       top:50px;
    }

【讨论】：

【解决方案4】：

这是您的解决方案

#main_image {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background-color: bisque;
}

【讨论】：

【解决方案5】：

你可以保持你应用的风格。只需添加以下内容：

/* Keep your applied style*/
figure {
  display: flex;
  justify-content: center;
}

或将其添加到您的图像中

#main_image {
  left: 50%;
  transform: translate(-50%, 0);
}

【讨论】：