保证金：0自动;有宽度时不居中

Question

所以我正在制作不同的部分，去一个迷你＆＃34;关于我＆＃34;页。在所有div中（这是最相关的）我有宽度和高度。并且它不会让我做保证金：0 auto;。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

div为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>