HTML/CSS - 为不同的屏幕尺寸自动调整元素的大小

Question

我正在复习我的 HTML/CSS 技能并尝试构建一个网站，其中的元素可以自动调整以适应不同的屏幕尺寸；例如，对于 header，我使用以下代码:

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

标题我希望保持元素居中并适应不同屏幕的大小，但是我上面的代码是有缺陷的，因为

1. 不居中
2. 如果我给它一个 500px 的宽度，我假设它会保持固定的 500px 并且不会适应不同的分辨率...

这是它的外观图片，请注意元素未居中。

我在这里做错了什么？

Answer 1

您可以使用相对百分比设置您的宽度，例如50%，实际宽度将是父宽度的50%。要使绝对标题居中，您可以将其 left 和 right 设置为 0 和 margin:0 auto:

#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;
}

Demo.