im开始学习html5&css3我自己，但在使用justify内容集中元素时遇到了问题。我的目标是做出一个基本的响应布局。
在我的代码中，我以整个web为中心，但不能以头部内的div为中心。我试图使用"调整内容"，将其设置为中心，将Flex设置为1，因为我希望我的3个div使用导航器中的总空间，但它不起作用。所以，如果有人能帮助我，那就太好了。谢谢
PD：对不起，如果我的英语不是很好。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<title>HTML5</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<header>
<div id="element1">ELEMENT 1</div>
<div id="element2">ELEMENT 2</div>
<div id="element3">ELEMENT 3</div>
</header>
<section>
</section>
<footer>
</footer>
</body>
CSS
* {
margin:0px;
padding:0px;
}
header, section, footer, aside, nav, article, hgroup{
display:block;
}
html{
width:100%;
background:white;
height:100%;
}
body {
max-width:2000px;
display:flex;
margin:auto;
background:gray;
}
header{
display:flex;
justify-content:center;
}
header div{
padding:10px;
flex:1;
}
#element1{
background:yellow;
}
#element2{
background:red;
}
#element3{
background:orange;
您只需要添加以下内容：
header {
margin: 0 auto;
}
您可以尝试在标题部分为div添加额外的容器。然后将其设置为显示为内联块。最后一步是将页眉的"文本对齐"属性设置为居中。代码：https://jsfiddle.net/8w3rz77o/
CSS：
* {
margin:0px;
padding:0px;
}
header, section, footer, aside, nav, article, hgroup{
display:block;
}
html{
width:100%;
background:white;
height:100%;
}
body {
max-width:2000px;
background:gray;
width: 100%;
}
header{
width: 100%;
text-align: center;
}
header > div{
display: inline-block;
}
header > div > div{
padding:10px;
display: inline-block;
}
#element1{
background:yellow;
}
#element2{
background:red;
}
#element3{
background:orange;
}