Question

以下是链接：http://www.cssdesk.com/PYBRZ

帮助，我不能使该元素（或任何具有不同大小的元素）将自己定位到父元素的中间。我已经把它弄清楚了2天，仍然无法找到解决这个问题的方法。

以下是更新的链接：http://www.cssdesk.com/W3MvQ

尽管如此，它不会将自己置于中间位置，它只是走向中心:(

Answer 1

将margin:auto提供给水平居中对齐。

.overlay img
{
   display: block; 
   margin-left: auto; 
   margin-right: auto; 
}

这是来自W3C标准的居中图像..请参阅此http://www.w3.org/Style/Examples/007/center.en.html

对于垂直对齐不是直接的，因为你的div是固定的。相反，你可以将背景改为你的div

background:url("http://oi46.tinypic.com/56612.jpg") no-repeat center center

试试这个： - http://www.cssdesk.com/nSyPa

<div id="overlay">

</div>


#overlay {
  background: black url('http://oi46.tinypic.com/56612.jpg') no-repeat center center;
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  z-index:1000;
  text-align: center;
}

你也可以在图像上使用margin-top，但这会更加维护头痛，你必须根据各种分辨率计算保证金等。

Answer 2

OP意味着正确地与中间对齐注意这个答案分成两部分：

你需要什么有点棘手。你需要知道父级的高度，以便应用margin-top，padding top或者甚至是绝对位置的top和left值;

例如，看看这个：

#overlay {

  background: black;
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 700px;
  z-index:1000;
  text-align:center;


}

#overlay img {
  margin-top:100px
}

使用JavaScript，您可以动态检测父级的高度，以便您可以相应地为子级应用一些样式。

您也可以不使用任何尺寸保留父级并添加特定填充，这样父级将采用子级的大小加上填充：

 #overlay {

      background: black;
      position: fixed;
      top:0;
      left:0;
      z-index:1000;
      padding:80px;


    }

    #overlay img {
       /*nothing in here unless you need any other style*/

    }

第一回答**

有很多方法，给父母一个风格text-align:center

#overlay {
  display: table;
  background: black;
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  z-index:1000;
  text-align:center;
}

或将图像转换为具有特定的with和margin auto的块：

#overlay img {


  display:block;
  width:100px;
  margin:auto


}

图像的默认值是内联块，这使得它充当文本，这就是为什么文本对齐中心到父工作的原因，另一方面，如果你使它成为一个块，具有特定的with和margin auto你确保它不被视为文本，并将集中在所有浏览器中。

由于您有不同的尺寸并且可以; t指定宽度，只需在您的示例中执行以下操作，请尝试：

#overlay img {

  display: block;
  margin:auto;

}

Answer 3

您可以尝试以下CSS：

html, body {
    height: 100%;
    width: 100%;
}

#overlay {
    position:relative;
    background: black;
    width: 100%;
    height: 100%;
}

#overlay img {
    position:absolute;
    top:0;
    bottom:0;
    left: 0;
    right: 0;
    margin: auto;
    outline: 1px dotted yellow;
}

并查看以下jsFiddle：http://jsfiddle.net/audetwebdesign/UwJZw/

如何运作

您在父容器（position: relative）上设置#overlay并将宽度设置为100％，将高度设置为100％。请注意，要使高度起作用，您需要将根元素（<html>）和<body>的高度设置为100％。

诀窍是绝对定位<img>并将顶部/底部/左/右位置设置为零，然后将边距设置为自动，这将水平和垂直居中。

奖励是，无论图像大小如何，这都有效，无需数学。

我添加了黄色轮廓，因此显示图像的边缘，这不会影响解决方案。

请注意，根据播放的浏览器镶边程度，100％的高度可能会触发垂直滚动条。考虑到页面布局的其余部分，您需要考虑如何最好地进行设计。

另一方面，如果你有固定高度的容器，这就像一个魅力，特别是对于照片画廊等。

这种技术基于CSS 2.1，所以它应该适用于很多浏览器。

CSS：如何将<img/>定位到父元素的中间

3 个答案: