CSS - 居中图像

Question

所以我有一个作为背景的图像，它“缩放以填充”框架，这正是我想要的，但图像不居中，因此当窗口像手机一样小时，显示的图像是只是边缘。 这是我使用的代码：

HTML

<div class="Background">
<div>

CSS

.Background {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100vw;
    height: 100vh;
    background-image: url('background.png');
    background-size: cover;
}

如果有人能给我一些提示，那就太棒了。 谢谢

Answer 1

css代码

.Background {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100vw;
    height: 100vh;
    background-image: url('background.png');
    background-size: cover;
    background-position: center;
}

Answer 2

试试这个：100％的工作。

.Background {
    display: block;
    margin: 0px auto;
    width: 100%;
    height: 100%;

    background-size: cover;
     background : rgba(0, 0, 0, 0) url("background.png") no-repeat scroll center top;
}

Answer 3

包括问题所在的示例将是有益的。

尝试这个。

        .Background {
        display: block;
        margin-left: auto;
margin-right:auto;
        width: 100vw;
        height: 100vh;
        background: url('background.png') no-repeat /* <- however you want the image to repeat */ center;
    }

见http://www.w3schools.com/css/css_background.asp

Answer 4

background-position: center;

添加到您的CSS规则将居中背景图像

text-align:center

添加到您的div将适用于所有内容，甚至文本