居中div水平和垂直没有扭曲的内容

我想中心与ID =“中心”的div在身体标记垂直和水平不扭曲的内容放置：M，cicle div和即将推出...文本。不能真正得到它，甚至工作，但它应该是一件简单的事情..居中div水平和垂直没有扭曲的内容

HTML：

<body> 
    <div id="center"> 
     <div class="circle"><div>M</div></div> 
     <h2>Coming soon...</h2> 
    </div> 
</body>

CSS：

* { 
    margin: 0; 
    padding: 0; 
    font-family: futura; 
} 

body { 
    height: 100%; 
    width: 100%; 
    background-color: black; 
} 

h2 { 
    color: #f6c003; 
    font-family: serif; 
    font-style: italic; 
    font-weight: 400; 
    font-size: 0.9em; 
    margin-top: 10px; 
} 

.circle { 
    text-align: center; 
    width: 50px; 
    height: 50px; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%; 
    background: #f6c003; 
} 

.circle div { 
    float:left; 
    width:50px; 
    padding-top:25px; 
    line-height:1em; 
    margin-top:-0.5em; 
    text-align:center; 
    color:black; 
    font-style: bold; 
    font-weight: 700; 
    font-family: serif; 
    font-size: 2.5em; 
}

Fiddle

来源

2014-01-20 user3188411

问如何将一个占据整个宽度的元素居中没有意义... – CBroe

你可以使用一些绝对定位把它做

#center { 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin: -33px 0 0 -43px; 
}

，你有一半的宽度的负利润和半人高的键是正确定位th元素（仅限固定尺寸）

还要确保您的身体设置为position: relative;为了绝对定位正常工作。

来源

2014-01-20 15:58:45 RyanS

完美！谢谢！ – user3188411

<style> 
body { 
height: 100%; 
width: 100%; 
background-color: black; 
} 

h2 { 
color: #f6c003; 
font-family: serif; 
font-style: italic; 
font-weight: 400; 
font-size: 0.9em; 
margin-top: 10px; 
} 

.circle { 
text-align: center; 
width: 50px; 
height: 50px; 
-moz-border-radius: 50%; 
-webkit-border-radius: 50%; 
border-radius: 50%; 
background: #f6c003; 
} 

.circle div { 
float:left; 
width:50px; 
padding-top:25px; 
line-height:1em; 
margin-top:-0.5em; 
text-align:center; 
color:black; 
font-style: bold; 
font-weight: 700; 
font-family: serif; 
font-size: 2.5em; 
} 
#center 
{ 
position:absolute; 
left:50%; 
top:50%; 
} 
</style> 
<body> 
<div id="center"> 
<div class="circle"><div>M</div></div> 
<h2>Coming soon...</h2> 
</div> 
</body>

来源

2014-01-20 15:52:46 Shn

一样多因为我讨厌桌子，桌子在垂直对齐方面做得很好。也许有更好的方法？

<body> 
    <table> 
     <tr> 
      <td> 
       <div id="center"> 
        <div class="circle"><div>M</div></div> 
        <h2>Coming soon...</h2> 
       </div> 
      </td> 
     </tr> 
    </table> 
</body>

风格：

table { 
    width: 100%; 
    height: 100%; 

    border-spacing: 0px; 
    border-collapse: collapse; 
} 

.center { 
    margin: auto; 
}

来源

2014-01-20 15:55:52 Randy

居中div水平和垂直没有扭曲的内容

回答

相关问题