Hittade i en tråd en länk till en sida där man visar hur man centrerar en div på höjden. Frågan är bara hur får man till det så att diven hamnar centrerad även vågrätt? Testa det här: Det absolut lättaste är att använda sig av margin taggen. Jag förstår inte varför det inte funkar för dig. Stephan Magnusson skrevCentrera en div
Lägger jag till "text-align: center;" i "#outer" så flyttas hela diven så att dess vänster sida är centrerad.
Med "margin-left: auto; margin-right: auto;" i "#middle" händer det inget.
<code>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Ny sida 1</title>
<style type="text/css">
#outer {height: 100%; overflow: hidden; position: relative; }
#outer[id] {display: table; position: static; }
#middle {position: absolute; top: 50%; } /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%; } /* for explorer only */
/* optional: #inner[id] {position: static;} */
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
any text any height
any content, for example generated from DB
everything is vertically centered
</div>
</div>
</div>
</body>
</html>
</code>Sv: Centrera en div
<code>
#aktuelldiv {
width: 300px;
height: 200px;
left: 50%;
margin-left: -150px;
position: absolute;
}
</code>
/ThomasSv:Centrera en div
Exempel margin: 10px auto; <- det är auto som gör tricket vilken sätter vänster och högermarginal till auto
<html><head>
<title>DivCenter</title>
</head>
<body>
<div style="width:500px;height:500px;margin:0px auto;background:#a1a1a1;">Foobar</div>
</body>
</html>
/StephanSv: Centrera en div
Stephan, vet inte hur fasiken du får det att fungera. Jag får det inte. Har provat din kod i IE7, Opera och FF. Sv: Centrera en div
Detta funkar.
<code>
margin-top: -85px;
margin-left: -298px;
position: absolute;
top: 50%;
left: 50%;
width: 250px;
height: 70px;
z-index:4;
</code>Sv:Centrera en div
Testa den här länken, funkar inte den är det nog något med din dator.
http://bluerobot.com/web/css/center1.html
//StephanSv: Centrera en div
<citat>funkar inte den är det nog något med din dator.</citat>
Nja, det är nog inget fel på hans dator.
Den koden centrerar ju bara horizontellt, ej vertikalt.
Kanske detta förslag passar bättre.
<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type=text/css>
div {
width:700px;
height:500px;
position:absolute;
left:50%;
top:50%;
margin-left: -350px;
margin-top: -250px;
border:1px solid black;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
</code>
Diven måste i detta fall ha ett bestämt mått, alltså ej med procent.