Question

我开始学习CSS。我有这个HTML和CSS。我无法将此图像居中到窗口的中心。请解释你是如何得到这个输出的。

编辑：我希望它在垂直和地平线上都是中心

谢谢。

＆＃13;

.myClass {
  background-image:url(http://www.funklix.in/wp-content/uploads/2014/07/Clip-art-free-1.gif);
  height:250px;
  width:250px;
  
}

＆＃13;

<div class="myClass">
  </div>

＆＃13;

Answer 1

以下是居中div的解决方案！
StackOverflow Answer

这是我首选的解决方案。

HTML:

<div class="container"><div class="container__inner"></div></div>

CSS:

.container{
  position:relative;
}
.container__inner{
  width: 250px;
  height: 250px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

请注意，此解决方案仅在容器具有固定高度时才有效！在这里阅读更多相关信息 http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

Answer 2

您需要为班级增加保证金。

.myClass {
    background-image:url(http://www.funklix.in/wp-content/uploads/2014/07/Clip-art-free-      1.gif);
    height:250px;
    width:250px;
    margin:0 auto;
    }

这将在元素的每一侧添加边距。

Answer 3

添加margin: auto

.myClass {
  background-image:url(http://www.funklix.in/wp-content/uploads/2014/07/Clip-art-free-1.gif);
  height:250px;
  width:250px;
  margin: auto;
}

将div放在页面的中心

3 个答案: