Html 标题图像总是在屏幕中间。

我想为我的网站创建一个标题图像

我想图像总是在中间会有站立的。当某个人的浏览器缩小时，中间的图像会出现。现在我举了一个例子，这个网站只包含了get-there，不管怎么做

---

您可以在css中使用

position:fixed

假设您的收割台有一个

.header

类，宽度和高度为800x50
在css中尝试：

.header{position:fixed; top:50%; left:50%; margin:-25px 0 0 -400px;}

---

编辑如果您不希望它垂直居中

Leeish

有更好的解决方案

您可以在css中使用

位置：固定

div{
    margin: 0 auto;
    width: [whatever]%;
}

假设您的收割台有一个

.header

类，宽度和高度为800x50
在css中尝试：

.header{position:fixed; top:50%; left:50%; margin:-25px 0 0 -400px;}

编辑如果不希望它垂直居中

Leeish

有更好的解决方案

div{
    margin: 0 auto;
    width: [whatever]%;
}

只要您的图像/div具有固定的宽度或百分比以便缩放，它将保持居中，左右边距为

auto。

这可能是一个重复的问题，因此您可能应该四处寻找另一个答案

编辑

我正在根据你的评论编辑我的答案。我做这把小提琴是为了做我所说的。我在里面放了两个

div

。一个有图像，一个没有图像，这样你就可以看到。内部div具有灵活的宽度、设置的高度并保持居中。第二个分区内的图像是“响应”的，因为它始终与

div

的宽度相匹配。据我所知，这正是他们在你发布的示例站点中所做的。下面是内部div（即图像）的代码

请注意，对于不支持

背景大小：cover

的旧版本IE，您需要一个javascript回退。我以前做过，我只是使用javascript来测量宽度/高度，我只是设置了一个

只要您的图像/div具有固定的宽度或百分比以便缩放，它将保持居中，左右边距为

auto。

这可能是一个重复的问题，因此您可能应该四处寻找另一个答案

编辑

我正在根据你的评论编辑我的答案。我做这把小提琴是为了做我所说的。我在里面放了两个

div

。一个有图像，一个没有图像，这样你就可以看到。内部div具有灵活的宽度、设置的高度并保持居中。第二个分区内的图像是“响应”的，因为它始终与

div

的宽度相匹配。据我所知，这正是他们在你发布的示例站点中所做的。下面是内部div（即图像）的代码

---

请注意，对于不支持

背景大小：cover

的旧版本IE，您需要一个javascript回退。我以前做过这个，我只是使用javascript来测量宽度/高度，我只是设置了这个值。

@Leeish的想法是正确的

另一种方法是使用以下css

.center_element {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;   /* half of the height of the header */
    margin-left: -150px; /* half of the width of the header*/
}

使用HTML：

<img class="center_element" src="images/header_image.jpg" width="300" height="100">

@Leeish的想法是正确的

另一种方法是使用以下css

.center_element {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;   /* half of the height of the header */
    margin-left: -150px; /* half of the width of the header*/
}

使用HTML：

<img class="center_element" src="images/header_image.jpg" width="300" height="100">


它对我不起作用。。好的，当我把浏览器窗口设置为我的屏幕的全宽时，图像将集中在中间->代码> {英雄IG{{Min Health:400 PX；空白：0自动；显示：块；}。但是当浏览器窗口小于图像时，图像将不居中，图像的左侧保持在左侧，也不会居中-例如，检查我的链接。。。你可以看到图像总是集中在浏览器的中间和图像的中间。我想听听你的意见这对我不管用。。好的，当我把浏览器窗口设置为我的屏幕的全宽时，图像将集中在中间->代码> {英雄IG{{Min Health:400 PX；空白：0自动；显示：块；}。但是当浏览器窗口小于图像时，图像将不居中，图像的左侧保持在左侧，也不会居中-例如，检查我的链接。。。你可以看到图像总是集中在浏览器的中间和图像的中间。我喜欢听你说这对我来说还是有点刻薄。如果他有一个具有设置宽度的元素，只需将边距设置为“自动”就可以了。我总是这样做。我不确定他的问题是什么；我猜让图像具有响应性是可行的，因为他们的图像没有响应性。他们只是使用我假设的背景图像，并将大小设置为
封面
。它的作用是拉伸图像，使其至少覆盖div。在这种情况下，div的高度不会随着缩放而改变，只是宽度，因此，如果放大，可以看到图像放大。你不能用一个
img
标签来做他们正在做的事情。您需要一个
div
，具有
背景图像
，并且
背景大小
设置为覆盖。使用just和
img
标记可以使其居中，但宽度和高度会随着图像变大而缩放。我意识到，当我解释他们如何响应页面宽度时，说他们没有响应听起来很愚蠢。我的意思是，图片本身没有什么特别之处。很抱歉有这么多评论，但请看我用小提琴和代码编辑的答案。对我来说，这似乎还是有点刻薄。如果他有一个具有设置宽度的元素，只需将边距设置为“自动”就可以了。我总是这样做。我不确定他的问题是什么；我猜让图像具有响应性是可行的，因为他们的图像没有响应性。他们只是使用我假设的背景图像，并将大小设置为
cove