Html 如何在div中居中放置一组元素

我正在为一个网站创建一个横幅。我固执地试图用HTML5/CSS3来实现它，而不是制作一个图像。横幅有一个不透明的背景图像，覆盖页面包装的整个宽度（设置为80%屏幕宽度）。除此之外，我有三个元素：一个徽标和两行文字。我已经把这三个元素放在了我想要的地方，使它们成为绝对的，并使用top、left等。我还把这三个元素放在了它们自己的div中。我想把它们放在背景图像的中心。我尝试过在任意一侧设置自动边距（css3中的首选方式），但不起作用

事实上，不仅能够将三人组（logo，第1行，第2行）置于中心位置，而且能够将它们作为一个绝对元素一起移动，这也很棒。这可能吗

*HTML*

#wrapper {
    background-color: Wheat;
    width: 1280px;
    /* doing that because jsfiddle viewport is not the entire page width.*/
    /* in real life, the wrapper extends below the banner -- that is where the main part of the website is */
}
header {
    position: relative;
    width: 100%;
    height: 180px;
    background-color: White;
}
header #background-image {
    background-image: url("http://arielbalter.com/cio/img/3tab_slanted.jpg");
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.3;
}
#header-group {
    margin: 0 auto 0 auto;
}
#house-logo {
    position: absolute;
    float: left;
    height: 160px;
    top:10px;
    left: 10px;
}
#line1 {
    display: block;
    position: absolute;
    left: 220px;
    top: -15px;
    padding: 0;
    margin: 0;
    font-family:"KGLoveSomebody", "Comic Sans MS", sans-serif;
    font-size: 7em;
    color: FireBrick;
}
#line2 {
    display: block;
    position: absolute;
    left: 185px;
    bottom: 1px;
    margin: 0;
    padding: 0;
    font-family:"Trebuchet", sans-serif;
    font-size: 4em;
}

及

---

注意：它并不完全符合您提供的代码。我必须将标题的高度扩展到215px以适应“line2”如果需要较小的高度大小，您可以尝试摆弄第2行css。

我取出了所有您不需要的位置。我使用了填充“修复它”和“显示”表。我看不到其余代码，所以我不知道是否适合。它确实有效，但不是我想要的。我真的想让团队作为一个整体保持完整将标题组居中。似乎这应该是可能的。我用另一种方式做了，也许这对你更有利。请注意，我必须延长标题和背景图像的高度，以适应背景中的第2行，因为第2行不会向上移动。因此，这让你想一想，如果你不喜欢，为什么投票否决答案，而不提供另一个答案解决方案

#wrapper {
    background-color: Wheat;
    width: 1280px;
    /* doing that because jsfiddle viewport is not the entire page width.*/
    /* in real life, the wrapper extends below the banner -- that is where the main part of the website is */
}
header {
    position: relative;
    width: 100%;
    height: 180px;
    background-color: White;
}
header #background-image {
    background-image: url("http://arielbalter.com/cio/img/3tab_slanted.jpg");
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.3;
}
#header-group {
    margin: 0 auto 0 auto;
}
#house-logo {
    position: absolute;
    float: left;
    height: 160px;
    top:10px;
    left: 10px;
}
#line1 {
    display: block;
    position: absolute;
    left: 220px;
    top: -15px;
    padding: 0;
    margin: 0;
    font-family:"KGLoveSomebody", "Comic Sans MS", sans-serif;
    font-size: 7em;
    color: FireBrick;
}
#line2 {
    display: block;
    position: absolute;
    left: 185px;
    bottom: 1px;
    margin: 0;
    padding: 0;
    font-family:"Trebuchet", sans-serif;
    font-size: 4em;
}

#wrapper {
background-color: Wheat;
width: 1280px;
/* doing that because jsfiddle viewport is not the entire page width.*/
/* in real life, the wrapper extends below the banner -- that is where the main part of the website is */
}
header {

width: 100%;
height: 180px;
background-color: White;
margin:0 auto;
}
header #background-image {
background-image: url("http://arielbalter.com/cio/img/3tab_slanted.jpg");
text-align: center;
 display: table;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.3;
}

#house-logo {
 display: table;
float: left;
height: 160px;
padding-left: 10em;


}
#line1 {
display: table;

text-align: center;
padding: 0;
margin: 0;
font-family:"KGLoveSomebody", "Comic Sans MS", sans-serif;
font-size: 7em;
color: FireBrick;
}
 #line2 {



    margin: 0;
    padding-right: 6em;
    font-family:"Trebuchet", sans-serif;
    font-size: 4em;
}

<div id="wrapper">
<header>
    <div id="background-image">

 <img id="house-logo" src="http://arielbalter.com/cio/img/CheckItOutHouseNoBackground.png " />
         <h1 id="line1">check it out!</h1>

         <h1 id="line2">Home Inspection</h1>

    </div>
</header>
</div>

 <!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>

<body>
 <div id="wrapper">
    <header>
        <div id="background-image"></div>
        <div id="header-group" >
            <img id="house-logo" src="http://arielbalter.com/cio/img/CheckItOutHouseNoBackground.png " />
             <h1 id="line1">check it out!</h1>

             <h1 id="line2">Home Inspection</h1>

        </div>
    </header>
  </div>

</body>
</html>

#wrapper {
background-color: Wheat;
width: 1280px;
}   
header {

width: 100%;
height: 215px;
background-color: White;
}
header #background-image {
background-image: url("http://arielbalter.com/cio/img/3tab_slanted.jpg");
height: 215px;
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.3;
position: absolute;

}
#header-group {
margin: 0 auto;


}
#house-logo {

float: left;
height: 160px;
padding-left: 30%;    
}
#line1 {

padding: 0;
margin: 0;
font-family:"KGLoveSomebody", "Comic Sans MS", sans-serif;
font-size: 7em;
color: FireBrick;
}
#line2 {


display:inline;
font-family:"Trebuchet", sans-serif;
font-size: 3.7em;
}