Question

我已经看过其他一些答案，但无法让他们为我的特定案例工作。我已经简化并包含了下面的整个代码块。基本上它只是在蓝色框中显示文本。我想知道如何使盒子居中。

<!DOCTYPE html>

<html>
<head>
    <style type="text/css"><!--
#content {
width:500px;
padding: 10px 10px 10px;
background-color: #D1ECFF;
position: relative;
border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
--></style>
</head>
<body>

<div id="content">

    <h2>Create</h2>

</div>
</body>
</html>

Answer 1

由于#content具有宽度，因此您可以将左右边距设置为auto。这将使元素在其父元素中居中。代码margin: 0 auto;的短位将顶部/底部边距设置为零，左/右设置为自动。

http://jsfiddle.net/vL5r2/

#content {
    margin: 0 auto;
    width:500px; 
    ...

Answer 2

如果你想将框和的内容垂直水平放置，你可以使用绝对定位和负边距来实现，如this jsfiddle中所示。

如何将框及其内容集中在CSS中？

2 个答案: