余白：0自動;幅があるときはセンタリングしません

Question

私は少しのミニ "私について"ページに行くために別の部分を作っていました。そして、すべての部門（これは最も関連性が高い）で、私は幅と高さを持っています。そしてそれは私にマージンをさせません：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

divがposition:fixedです。それはそれout of the flowかかるので、あなたはそれをleft（またはright）を与える必要がある - このような何か：あなたは、コンテナのdivにカプセル化する必要がある

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

、私はこれを変更されています。 fixed`：あなたは `ポジションを持っているためだ:)

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>