Question

我的网站设计涉及到页面中间的圆形幻灯片。背景图像是一个不会移动的重复圆圈，但是..我不能将它与我的圆圈对齐以便匹配..

我使用1：1的背景图像使其完美呈圆形。使网站在我正在使用的所有浏览器上完美运行

background-position: center top;
background-repeat: no-repeat;
background-attachment: scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

我得到的结果类似于我在这里制作的小提琴： http://jsfiddle.net/LG5r9/1/

较小的蓝色圆圈（带黑色边框）必须位于较大的蓝色圆圈的中间。我该如何解决这个问题？说实话，我很傻。

编辑：我很傻。如果您以1：1的分辨率使用浏览器，它的中心位置非常好。是否可以修复它以便与任何浏览器设置兼容？

Answer 1

您可以使用CSS表格！

CSS

html, body{
    height: 100%;
    width: 100%;
    /* you might want an additional container instead of setting
     * the display: table; directly on <body>, depending on use case */
    display: table;
    background-image:url('http://www.osa-opn.org/opn/media/Images/AfterImages/13-jan-01.jpg?width=2400&height=2400&ext=.jpg');
    background-position: center; /* as mentioned in other answers */
    background-repeat: no-repeat;
    background-attachment: scroll;
}
.container {
    display: table-cell;
    text-align: center;
    vertical-align: middle; /* only works because of table-cell display */
}
#image {
    border-radius: 50em;
    height: 200px;
    width: 200px;
}

HTML

<body>
    <div class="container">
        <img src="http://www.osa-opn.org/opn/media/Images/AfterImages/13-jan-01.jpg?width=2400&height=3300&ext=.jpg" alt="" id="image" />
    </div>
</body>

http://jsfiddle.net/LG5r9/6/

演示

Answer 2

而不是：

background-position: center top;

只需使用：

background-position: center;

另外对于firefox你需要：

-moz-background-position: fixed;

如果你想让其他div tehn居中，你可以像这样使用绝对位置：

position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;

http://jsfiddle.net/Hive7/LG5r9/5/

Answer 3

您只需要将背景图像和前景图像都居中：

你走了： http://jsfiddle.net/LG5r9/4/

以下是如何将（前景）元素置于屏幕中间：

#image {
border-radius: 50em;
height: 200px;
width: 200px;
position:absolute;
top:50%;
margin-top:-100px;
left:50%;
margin-left:-100px;
}

以下是如何居中背景图片：background-position:center

中心背景图像

3 个答案:

CSS

HTML