Einen Guten Morgen Euch allen 
Es geht um folgendes:
1.Ich habe in einer Divbox eine weitere Divbox, meine Frage lautet nun wie kann ich diese mittig zentrieren, so dass ich wenn sich der Browser verschiebt die zentrierte Divbox(text321/322) fest verankert ist und sich nicht frei mit bewegt?
2.Wie plane ich mein Layout am effektivsten bezüglich der breiten und Höhengestaltung, mit Pixel, Prozent oder Em Angaben?
Hier einmal der Quelltext:
<!DOCTYPE html>
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="/layout.css" />
<title></title>
</head>
<body>
<div id="fundament">
<div id="header">
<h1>Test</h1>
</div>
<div id="navigation">
</div>
<div id="text1">
</div>
<div id="text2">
<div id="text21">
<h3>Gewissenhaft</h3>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet
</div>
<div id="text22">
<h3>Leistungsstark</h3>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet
</div>
<div id="text23">
<h3>Individuell</h3>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet
</div>
</div>
<div id="text3">
<div id="text31">
<h3>test</h3>
</div>
<div id="text32">
<div id="text321">
<h3>test</h3>
</div>
<div id="text322">
<h3>test</h3>
</div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS:
body
{
background-color:white;
font-size:100%;
margin:0em;
padding:0em;
width:100%;
height:100%;
font-family:Arial;
}
#fundament {
width:100%;
height:100%
}
/*Kopfbereich*/
#header {
width:100%;
height:150px;
background-color:white;
}
/*Navigation*/
#navigation {
width:100%;
height:30px;
font-size:1.2em;
color:dimgrey;
text-align:right;
background-color:#144C4D;
}
/*Erster Haupttextbereich*/
#text1 {
width:100%;
height:550px;
background-color:white;
}
#text2 {
width:100%;
height:480px;
background-color:#144C4D;
text-align: center;
}
#text21 {
width:20%;
height:30%;
background-color:white;
position:absolute;
top:840px;
left:40%;
border-radius: 20px;
}
#text22 {
width:20%;
height:30%;
background-color:white;
position:absolute;
top:840px;
left:100px;
border-radius: 20px;
}
#text23 {
width:20%;
height:30%;
background-color:white;
position:absolute;
top:840px;
right:100px;
border-radius: 20px;
}
#text3 {
width:100%;
height:650px;
background-color:white;
text-align: center;
}
#text31 {
width:40%;
height:45%;
background-color:#144C4D;
position:absolute;
top:1340px;
left:100px;
border-radius: 20px;
}
#text32 {
width:40%;
height:45%;
background-color:#144C4D;
position:absolute;
top:1340px;
right:100px;
border-radius: 20px;
}
#text321 {
width:80%;
height:155px;
background-color:white;
position:absolute;
bottom:40px;
right:80px;
border-radius: 20px;
}
#text322 {
width:80%;
height:155px;
background-color:white;
position:absolute;
top:40px;
right:80px;
border-radius: 20px;
}
/*Endleiste*/
#footer {
width:100%;
height:100px;
background-color:dimgrey;
}
Herzliche Grüße
Anevay