当我的 div 没有水平居中时？答案

【问题标题】：When my div is not getting horizontally centered?当我的 div 没有水平居中时？
【发布时间】：2016-08-03 22:44:49
【问题描述】：

为什么图片不在此处居中？

#image {
  margin: 0 auto;
}

<div id="image">
  <img src="https://placekitten.com/200/300">
</div>

但它与<center> 标签完美搭配。

我的fiddle

【问题讨论】：

Center image in div horizontally的可能重复
How to make an image center (vertically & horizontally) inside a bigger div 的可能重复项以及通过搜索 SO 找到的大量类似答案。

标签： css html

【解决方案1】：

JSFiddle here。你的<div>需要100%在width中，图片必须是块元素；试试这个 CSS：

#image {
    width: 100%;
}
#image img {
    margin: 0 auto;
    display: block;
}

或者：

#image {
    width: 100%;
    text-align: center;
}

这将使<img> 标记居中，因为它们默认具有display: inline-block;。只有display: block 元素可以使用margin: 0 auto; 居中。

快速总结：

在元素上使用margin: 0 auto; 将block 显示的元素水平居中，以相对于父元素的宽度居中；
在父元素上使用text-align: center; 将inline-block 显示的元素水平居中，以相对于父元素的宽度居中。

【讨论】：

【解决方案2】：

或者你可以使用flexbox

#image {
  height: 90vh;
  width: 90vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

您不需要90vh 或90vw，但您确实需要为height 和width 赋予一些价值。是在px 还是% 取决于您。

【讨论】：

【解决方案3】：

由于图像不是块元素，只需将text-align: center; 添加到其父元素即可。

#image{
  text-align: center;
}

【讨论】：

【解决方案4】：

您可以使用text-align:center;

#image{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  
     }

<div id="image">
     <img src="https://scontent-kul.xx.fbcdn.net/v/t1.0-0/s526x395/13934860_132991530474366_7559506120027031422_n.jpg?oh=54eb36c2f2b2383712a6dcf1da2cd638&oe=58212A26">
     </div>

【讨论】：