如何使header元素的背景图片在头部区域居中显示？

代码里的明显错误 #

• 语法错误：header选择器闭合后多了一个额外的}，这会导致后续CSS解析异常，必须删掉。

背景图片在header区域居中的实现 #

要让背景图片在header的圆形容器内居中显示，给header添加以下属性：

background-position: center;
background-repeat: no-repeat;
/* 可选：根据需求控制图片大小，cover会铺满容器，contain会完整显示图片 */
background-size: cover;

header元素自身在页面居中的实现 #

如果要让带边框的header整体在页面水平居中，给header加上：

margin: 0 auto;

h1样式的优化 #

你当前用固定左右margin值（600px）让h1居中，这种方式在不同屏幕尺寸下兼容性差，换成margin: 0 auto配合宽度限制更灵活：

h1 {
    text-align: center;
    color: orange;
    background-color: lightgrey;
    border: dotted white 4px;
    /* 替换固定margin */
    margin: 0 auto;
    max-width: 600px; /* 也可以设置固定宽度，比如width: 600px */
    padding: 10px; /* 可选，增加内边距让文字不紧贴边框 */
}

修正后的完整CSS代码 #

header {
    background-image: url('tiredBOX.jpg');
    border: solid 3px orange;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    padding: 30px;
    /* 背景图片居中配置 */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* header自身水平居中 */
    margin: 0 auto;
}

h1 {
    text-align: center;
    color: orange;
    background-color: lightgrey;
    border: dotted white 4px;
    margin: 0 auto;
    max-width: 600px;
    padding: 10px;
}

body {
    background-color: teal;
}

内容的提问来源于stack exchange，提问作者Chris Atkins