如何將框及其內容集中在CSS中？

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;的短位margin: 0 auto; 將top / bottom margin設置為零，將left / right設置為auto。

http://jsfiddle.net/vL5r2/

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

Answer 2

如果要垂直居中的框和它的內容的水平，你可以用絕對定位和負利潤率中可以看到做這個的jsfiddle 。

如何將框及其內容集中在CSS中？

問題描述

2 個解決方案

解決方案1
2 2012-01-22 04:19:49

解決方案2
0 2012-01-22 05:38:45

如何將框及其內容集中在CSS中？

問題描述

2 個解決方案

解決方案1 2 2012-01-22 04:19:49

解決方案2 0 2012-01-22 05:38:45

解決方案1
2 2012-01-22 04:19:49

解決方案2
0 2012-01-22 05:38:45