html - margin : 0 auto; not centering when there is a width

Question

所以我制作了不同的部分以转到一个迷你的“关于我”页面。在所有 div 中(这是最相关的)我有宽度和高度。而且它不会让我做 margin: 0 auto;.

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

div 是position:fixed。这会使它脱离流程，所以您需要给它一个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>