Centrera div i div (horisontellt och vertikalt)
Hej alla!
Som topicen lyder behöver jag hjälp med hur man centrerar en div(2) i en annan div(1). Mer konkret, har jag skapat en header med hjälp av en div(1), och i den headern vill jag centrera en annan div(2). Jag vill alltså (ännu mer konkret) att centrum av den div(2), ska vara i centrum på div(1).
Jag har så klart googlat detta, och jag har förstått att andra har haft bekymmer med det också. Jag förstår också att det finns lite olika ”lösningar” på problemet, men jag tycker inte att jag får någon av dem att bli bra. Min bifogade kod innehåller en lösning från stackoverflow som tycks se fint ut (se bild), det är alltså den blåa rutan som är centrerade i den gröna. Men om jag ändrar width på #center hamnar den utanför centrum, om jag inte ändrar margin också vill säga. Och det är gärna detta jag vill slippa, att ”manuellt” passa in div:en i centrum.
Denna ”grej” jag vill göra, att centrera en div i en annan div, verkar ju så enkelt om man pratar om det, och jag blir så irriterad av att det verkar vara så besvärligt att genomföra (men det är väl bara jag som är en noob).
Mitt slutresultat ska EGENTLIGEN vara att jag ska göra en meny bestående av 4 knappar vilka ska vara bredvid varandra horisontellt i div:en. Dessa knappar ska vara centrerade på horisontellt och vertikalt i headern. Men jag tänkte att jag måste lära mig krypa innan jag börjar gå…
Har ni någon lösning på mitt problem?
CSS
body
{
background-color:red;
margin:0;
}
#centerf
{
background-color:green;
height:400px;
position:relative;
}
#center
{
position: absolute;
width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px;
background: blue;
}
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="olle" />
<title>This is my testpage</title>
</head>
<body>
<div id="centerf">
<div id="center">
</div>
</div>
</body>
</html>
http://www.bilddump.se/bilder/20170125083446-194.16.175.140.j...
