HTML/CSS-根据不同的屏幕大小自动调整元素大小

我正在温习我的HTML/CSS技能，并试图建立一个网站，其中的元素会自动调整到不同的屏幕大小；例如，对于

标题

，我使用以下代码：

#header{
    position: absolute;
    top: 10%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 500px;
    height: 100px;
    border:thin solid black;
}​

对于标题，我希望保持元素居中，并根据不同屏幕的大小进行调整，但是我上面的代码有缺陷，因为

它没有居中

如果我给它一个500px的宽度，我假设它将保持一个固定的500px，并且不会调整到不同的分辨率

这是一个它看起来像什么的图像，注意元素没有居中。

---

我做错了什么？

习惯了这一点

#header{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -250px;
    width: 500px;
    height: 100px;
    border:thin solid black;
}​ 

---

您可以使用相对百分比设置

宽度

，例如

50%

，实际宽度将为父宽度的50%。要使绝对页眉居中，可以将其

左

和

右

设置为

0

和

边距：0自动

：

#header{
  position: absolute;
  top: 10%;    
  left:0;
  right:0;
  margin:0 auto;
  width: 50%;
  height: 100px;
  border:thin solid black;
  text-overflow:ellipsis;
  overflow:hidden;
}

---

当一个div与上/左值居中时，给它50%是正确的，但你必须记住用边距减去一半他的高度/宽度。 对于宽度，您可以使用

max width

，这意味着如果有足够的空间，div的宽度将为500px，否则它将像具有百分比宽度一样拉伸

这是我的密码

    #header{
        position: absolute;
        top: 10%;
        left: 50%;
        margin-top: -50px;
        margin-left: -250px;
        max-width: 500px;
        height: 100px;
        border:thin solid black;
    }​

---

谢谢，请在上面的例子中告诉我，如果我有“宽度：500px”，那是固定宽度吗？如何调整宽度和尺寸？我应该给它分配一个百分比吗？如果你取400像素的宽度，那么定义左边的边距：200px；----------定义容器的任何宽度，而不是定义-px中剩余的一半边距。无需使用绝对定位（除非出于其他原因需要）。只需将居中的左/右边距设置为

auto

，并将宽度设置为基于百分比的宽度，如

width:60%

。