Javascript 在div中水平和垂直对齐图像

我正在使用Bootstrap和WordPress

我一直在研究如何在div中水平和垂直对齐图像（显然是经典问题）。我用这个问题的答案来垂直对齐我的图像：

现在我需要水平对齐它。我知道要做到这一点，您通常会添加边距：0自动

问题是我采用的方法使用了边距：auto并且如果我将其更改为边距：0自动，它将撤消垂直对齐

我开始回避这个问题，但我无法复制它。所以我认为是引导中的某些东西覆盖了它，但我不确定是什么

下面是我在另一个stackoverflow问题的垂直对齐解决方案中使用的基本代码：

HTML

您可以在下面的位置看到问题。这是顶部的滑块，问题出在.carousel内部分区。请将浏览器的宽度调整为800px左右，以便能够真正看到问题

---

非常感谢

我看了你的网页。我认为，如果您只需从该选择器中删除宽度规则，问题就会自行解决：

.crop-featured-2 { 
  height: 320px;
  width: 575px;
  position: relative;
}

改用

.crop-featured-2 { 
  height: 320px;
  position: relative;
}

试试这个

.crop-featured-2 {
position: relative; 
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}

---

你是说你遇到问题的是

carousel indicators

div吗？不，是内部的div。carousel inner我会更新我的问题以澄清我没有看到问题，只是你的图像在跳跃，寻呼机没有以不同的宽度显示。你能指定你的问题到底是什么吗？在浏览器宽度800 px，你可以看到图像垂直排列在div的中间，但是被锚定在左边。我希望它们在中间垂直和水平对齐。嘿，谢谢Mistar MangsAM！！这实际上消除了我在div中水平对齐图像的需要。

.crop-featured-2 { 
  height: 320px;
  position: relative;
}

.crop-featured-2 {
position: relative; 
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}