-1

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

帮助，我不能让那个元素（或任何不同大小的元素）将自己定位到父元素的中间。我已经解决了2天，仍然找不到解决此问题的方法。

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

尽管如此，它不会将自己定位到中间，它只是去中心:(

4

3 回答 3

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 ，但这将更加令人头疼，并且您必须根据各种分辨率等计算边距。

于 2013-04-25T01:00:58.933 回答
1

OP 表示与中间垂直对齐请注意，此答案分为两部分：

你需要的有点棘手。您需要知道父级的高度，以便应用顶部边距、顶部填充，甚至使用绝对位置的顶部和左侧值；

例如看这个：

#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


}

图像的默认值是 inline-block ，这使它充当文本，这就是为什么 text-align center to parent 起作用的原因，另一方面，如果你把它做成一个块，具有特定的 with 和 margin auto 你保证它不被视为文本，并将在所有浏览器中居中。

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

#overlay img {

  display: block;
  margin:auto;

}
于 2013-04-25T01:03:15.010 回答
1

您可以尝试以下 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>绝对定位并将顶部/底部/左侧/右侧位置设置为零，然后将边距设置为自动，这将水平和垂直居中。

好处是无论图像大小如何，它都可以工作，不需要数学。

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

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

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

该技术基于 CSS 2.1，因此它应该可以在相当多的浏览器中使用。

于 2013-04-25T01:37:55.787 回答