項目和邊之間的中心DIV？

Question

我有一個大的div，這是我想要在我的電腦上的中心位置。任何其他計算機不居中。我正在談論的是「midwrap」，這是我擁有的大黑盒子。我希望它側向鏈和包裝的一側爲灰色框是在。

designatease.com

感謝您提前之間爲中心。

HTML

<div id="wrapper"> 
<div id="midwrap"></div> 
<a class="Resources">Resources</a> 
<ul id="sidelinksleft"> 
<li><a href="quickstart.html">Quick Start</a></li> 
<li><a href="tagsmain.html">Tag Helper</a></li> 
<li><a href="news.html">News</a></li> 
<li><a href="learn.html">Learn</a></li> 
<li><a href="sites.html">Useful Sites</a></li> 
</ul> 
</div> 
</body> 

CSS

#wrapper{ 
position:relative; 
top:-82px; 
margin-right:4%; 
margin-left:4%; 
width:92%; 
height:100%; 
background:#fafafa; 
border-left: 1px #c9c9c9 solid; 
border-right: 1px #c9c9c9 solid; 
overflow:hidden; 
} 

#sidelinksleft { 
    margin-left:auto; 
    margin-right:auto; 
    float:left; 
    height:25px; 
    position:relative; 
    /*removed clear from here*/ 
    float:left; 
    margin-left:-25px; 
    top:16px; 
} 

#sidelinksleft li{ 
position:relative; 
padding-top:3px; 
list-style-type: none; 
} 

#sidelinksleft li a{ 
color:#000000; 
font-size:13px; 
font-family: sans-serif; 
text-decoration:none; 
background-color:#82CFFD; 
height:17px; 
position:relative; 
border:1px solid black; 
width:150px; 
padding-left:3px; 
padding-top:2px; 
padding-bottom:2px; 
display:block; 
margin-bottom:2px; 

} 

#sidelinksleft li a:hover{ 
color:#000000; 
font-size:13px; 
font-family: sans-serif; 
text-decoration:none; 
background-color:#B0E2FF; 
height:17px; 
position:relative; 
border:1px solid black; 
width:150px; 
padding-left:3px; 
padding-top:2px; 
padding-bottom:2px; 
display:block; 
margin-bottom:2px; 

} 

#sidelinksleft li a:active{ 
color:#000000; 
font-size:13px; 
font-family: sans-serif; 
text-decoration:none; 
background-color:#82CFFD; 
height:17px; 
position:relative; 
border:1px solid black; 
width:150px; 
padding-left:3px; 
padding-top:2px; 
padding-bottom:2px; 
display:block; 
margin-bottom:2px; 

} 

.Resources{ 
color:#000000;; 
font-size:16px; 
font-family: sans-serif; 
position:relative; 
margin-left:-156px; 
top:10px; 
} 

#midwrap { 
    width:74%; 
    height:95%; 
    border-left: 1px solid black; 
    border-right: 1px solid black; 
    background:black; 
    top:2%; 
    position:relative; 
    float:right; /*float right*/ 
    margin-right:5.5%; 
} 

Answer 1

也許你應該重做一個簡單的模板之前的風格吧。

他們的行爲中使用CSS規則可能會有所幫助：

1. width和min-width和max-width。
2. float和佈局相鄰元件
3. text-align和display:inline-block原因它認爲floatting元件和overflow:hidden;不可用那裏。

margin頂部不應該用在％因爲它反映了家長寬度的百分比，不是它的高度哎！這是一個意外的行爲是不是？（所以是如果父母在CSS的寬度％垂直填充）

我們可以得到這樣的事情：http://codepen.io/anon/pen/AHhpG

html,body { 
    height:100%; 
    margin:0; 
    text-align:center; 
} 
div, nav ,a { 
    border:1px solid; 
} 
#main { 
    width:90%; 
    margin:1% auto 0; 
    height:90%; 
    min-width:800px; 
} 
nav { 
    float:left; 
    margin:1em; 
    max-width:20%; 
    width:200px; 
} 
nav a { 
    display:block; 
} 
#box { 
    display:inline-block; 
    width:70%; 
    height:90%; 
    margin:1em 1em 0; 
}