DIV horizontal und vertikal zentriert platzieren

Hi,
ich versuche jetzt schon seit Stunden folgendes Problem zu lösen und schaff es einfach nicht :frowning:
Ich möchte gern ein Textfeld nicht nur horizontal zentriert (text-align:center), sonder auch vertikal zentriert (valign:middle) platzieren.
Das Horizontale funktioniert, aber das Vertikale nicht. Sprich, der Text ist immer im Browser ganz oben zentriert und nicht genau in Bildschirmmitte.

HTML:

[CODE]

Title

Title

This is the content of the infobox.

[/CODE]

CSS:

[CODE].infobox-container {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
width: auto;
}
.infobox {
width: 250px;
background: #424242;
padding: 10px 5px 5px 5px;
margin:10px;
color: #fff;
font-size: 90%;
}
.infobox h3 {
background: #3198dd;
width: 270px;
color: #fff;
padding: 10px 5px;
margin: 0;
font-size: 160%;
text-align: center;
font-weight: bold;
}
.infobox h3 {
position: relative;
left: -15px;
}
.infobox-container .triangle-l {
border-color: transparent #2083c2 transparent transparent;
border-style:solid;
border-width:13px;
height:0;
width:0;
}
.infobox-container .triangle-r {
border-color: transparent transparent transparent #2083c2;
border-style:solid;
border-width:13px;
height:0;
width:0;
}
.infobox-container .triangle-l {
position: absolute;
left: -12px;
top: 45px;
}
.infobox-container .triangle-r {
position: absolute;
left: 266px;
top: 45px;
}
.infobox {
position: relative;
z-index: 90;
}
.infobox h3 {
position: relative;
z-index: 100;
}

.infobox-container .triangle-l {
z-index: 0; /* displayed under the infobox /
}
.infobox-container .triangle-r {
z-index: 0; /
displayed under the infobox */
}
.infobox {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242));
background-image: -moz-linear-gradient(top,#6a6a6a,#424242);
}
.infobox h3 {
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
background-image: -webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
background-image: -moz-linear-gradient(top,#33acfc,#3198dd);
text-shadow: #2187c8 0 -1px 1px;
}
.infobox a {
color: #35b0ff;
text-decoration: none;
border-bottom: 1px dotted transparent;
}
.infobox a:hover, .infobox a:focus {
text-decoration: none;
border-bottom: 1px dotted #35b0ff;
}[/CODE]

Danke!!! :slight_smile:

Moderation: Verschoben von HTML zu CSS.

Das Thema kommt immer wieder. Schau mal wie andere das erreichen:
http://www.html.de/css/43597-divs-mittig-positionieren.html
http://www.html.de/css/42726-vertical-align-text-horizontal-und-vertikal-zentriert.html
http://www.html.de/css/43562-div-container-zentrieren.html
http://www.html.de/css/43059-probleme-mit-zentrieren-einer-div-box-position.html

So müsste es Funktionieren:

[TABLE]
[TR]
[TD=„class: webkit-line-content“]#apDiv333 {[/TD]
[/TR]
[TR]
[TD=„class: webkit-line-number“][/TD]
[TD=„class: webkit-line-content“]top: 50%;[/TD]
[/TR]
[TR]
[TD=„class: webkit-line-number“][/TD]
[TD=„class: webkit-line-content“]left: 50%;[/TD]
[/TR]
[TR]
[TD=„class: webkit-line-number“][/TD]
[TD=„class: webkit-line-content“]position: absolute;[/TD]
[/TR]
[TR]
[TD=„class: webkit-line-number“][/TD]
[TD=„class: webkit-line-content“]margin-top: -340px; /* Die negative Hälfte von der Höhe /[/TD]
[/TR]
[TR]
[TD=„class: webkit-line-number“][/TD]
[TD=„class: webkit-line-content“]margin-left: -700px; /
Die negative Hälfte von der Breite */[/TD]
[/TR]
[TR]
[TD=„class: webkit-line-number“][/TD]
[TD=„class: webkit-line-content“]width: 500px;[/TD]
[/TR]
[TR]
[TD=„class: webkit-line-number“][/TD]
[TD=„class: webkit-line-content“]height: 500px;[/TD]
[/TR]
[TR]
[TD=„class: webkit-line-number“][/TD]
[TD=„class: webkit-line-content“]}[/TD]
[/TR]
[/TABLE]

Bei margin-top und margin-left müsstest du dich ei wenig spielen, da er die 50% von beiden abzieht