margin：0 auto;当有宽度时不居中

Question

因此，我正在制作不同的部分，以便找到一个小型的“关于我”页面。在所有divs中（这是最相关的），我有宽度和高度。它不会让我做保证金：0汽车;。

body { 
 
background: #aaa; 
 
} 
 

 
#about { 
 
font-family: arial; 
 
width: 300px; 
 
height: 20px; 
 
text-align: center; 
 
padding-left: 10px; 
 
opacity: 0.5; 
 
padding-top: 4px; 
 
border-radius: 10px; 
 
background-color: #000; 
 
position: fixed; 
 
margin: 0 auto; 
 
overflow: hidden; 
 
font-size: 11px; 
 
-webkit-transition: all 0.8s ease-out; 
 
-moz-transition: all 0.8s ease-out; 
 
-o-transition: all 0.8s ease-out; 
 
transition: all 0.8s ease-out; 
 
} 
 

 
#about:hover { 
 
height: 250px; 
 
} 
 

 
.about-text { 
 
width: 300px; 
 
height: 220px; 
 
overflow-y: auto; 
 
margin-top: 5px; 
 
}

<div id="about"> 
 
<font face="arial" color="#fff">&#120016;&#120043;&#120056;&#120062;&#120061; &#120028;&#119942;</font> 
 

 
<div class="about-text"> 
 
<font face="arial" color="#fff"><br> 
 
Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text.</font> 
 
</div> 
 
</div>

Answer 1

股利是position:fixed。这需要它out of the flow，所以你需要给它一个left（或right） - 是这样的：

body { 
 
background: #aaa; 
 
} 
 

 
#about { 
 
font-family: arial; 
 
width: 300px; 
 
height: 20px; 
 
text-align: center; 
 
padding-left: 10px; 
 
opacity: 0.5; 
 
padding-top: 4px; 
 
border-radius: 10px; 
 
background-color: #000; 
 
position: fixed; 
 
left: 50%; 
 
transform: translateX(-50%); 
 
-webkit-transform: translateX(-50%); 
 
overflow: hidden; 
 
font-size: 11px; 
 
-webkit-transition: all 0.8s ease-out; 
 
-moz-transition: all 0.8s ease-out; 
 
-o-transition: all 0.8s ease-out; 
 
transition: all 0.8s ease-out; 
 
} 
 

 
#about:hover { 
 
height: 250px; 
 
} 
 

 
.about-text { 
 
width: 300px; 
 
height: 220px; 
 
overflow-y: auto; 
 
margin-top: 5px; 
 
}

<div id="about"> 
 
<font face="arial" color="#fff">&#120016;&#120043;&#120056;&#120062;&#120061; &#120028;&#119942;</font> 
 

 
<div class="about-text"> 
 
<font face="arial" color="#fff"><br> 
 
Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text.</font> 
 
</div> 
 
</div>

Answer 2

你必须在一个div容器封装，我已经修改了此。 :)

body { 
 
background: #aaa; 
 
} 
 
.container{ 
 
width: 100%; 
 
margin: 0 auto; 
 
display: block; 
 
} 
 
#about { 
 
font-family: arial; 
 
width: 300px; 
 
height: 20px; 
 
text-align: center; 
 
padding-left: 10px; 
 
opacity: 0.5; 
 
padding-top: 4px; 
 
border-radius: 10px; 
 
background-color: #000; 
 
position: relative; 
 
margin: 0 auto; 
 
overflow: hidden; 
 
font-size: 11px; 
 
-webkit-transition: all 0.8s ease-out; 
 
-moz-transition: all 0.8s ease-out; 
 
-o-transition: all 0.8s ease-out; 
 
transition: all 0.8s ease-out; 
 
} 
 

 
#about:hover { 
 
height: 250px; 
 
} 
 

 
.about-text { 
 
width: 300px; 
 
height: 220px; 
 
overflow-y: auto; 
 
margin-top: 5px; 
 
}

<div class="container"> 
 
    <div id="about"> 
 
    <font face="arial" color="#fff">&#120016;&#120043;&#120056;&#120062;&#120061; &#120028;&#119942;</font> 
 

 
    <div class="about-text"> 
 
    <font face="arial" color="#fff"><br> 
 
    Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text.</font> 
 
    </div> 
 
    </div> 
 
    </div>