Css 水平和垂直居中div，不扭曲内容_Css_Html_Position_Center

Css 水平和垂直居中div，不扭曲内容

css html

Css 水平和垂直居中div，不扭曲内容,css,html,position,center,Css,Html,Position,Center,我正试图在body标签内使用id=“center”垂直和水平将div居中，而不会扭曲内容的位置：M，cicle div，很快就会出现。。。文本即使它应该是一件简单的事情，也不能真正让它工作 HTML: 身体{ 身高：100%；宽度：100%；背景色：黑色； } 氢{ 颜色：#f6c003；字体系列：衬线；字体：斜体；字体大小：400；字号：0.9em；边缘顶部：10px； } .圆圈{ 文本对齐：居中；宽度：50px；高度：50px； -moz边界半径：50%； -webki

我正试图在body标签内使用id=“center”垂直和水平将div居中，而不会扭曲内容的位置：M，cicle div，很快就会出现。。。文本即使它应该是一件简单的事情，也不能真正让它工作

HTML:


身体{
身高：100%；
宽度：100%；
背景色：黑色；
}
氢{
颜色：#f6c003；
字体系列：衬线；
字体：斜体；
字体大小：400；
字号：0.9em；
边缘顶部：10px；
}
.圆圈{
文本对齐：居中；
宽度：50px；
高度：50px；
-moz边界半径：50%；
-webkit边界半径：50%；
边界半径：50%；
背景：#f6c003；
}
.圆形分区{
浮动：左；
宽度：50px；
填充顶部：25px；
线高：1米；
边缘顶部：-0.5em；
文本对齐：居中；
颜色：黑色；
字体风格：粗体；
字号：700；
字体系列：衬线；
字号：2.5em；
}
#居中
{
位置：绝对位置；
左：50%；
最高：50%；
}
M
马上就来。。。

虽然我讨厌表格，但表格在垂直对齐方面做得很好。也许有更好的办法

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

你可以使用一些绝对定位来完成它

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

关键是你有一半宽度和一半高度的负边距来正确定位th元素（仅固定大小）

还要确保您的身体设置为

位置：相对以便绝对定位正确工作。询问如何将占据整个宽度的元素居中是没有意义的…
<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>

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

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