将 div 置于页面中央

Question

我开始学习了css。我有这个 html 和 css。我无法将此图像居中到 window 的中心。还请解释您是如何获得此输出的。

已编辑：我希望它在垂直和水平方向上都居中

谢谢。

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

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

Answer 1

添加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;
}

Answer 2

您需要为您的 class 添加保证金。

.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

这里是居中解决方案 div!
Whosebug 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/

将 div 置于页面中央

Placing div in the center of the page

html

css