Question

我所做的是在主margin:20%上使用div ......但我不认为这是最好的方式：

CSS：

.wrapper {
    background-color:#F0C;
    float:left;
    width:1000px;
    height:400px;

    margin-left:20%;
    alignment-adjust:central;
    position:absolute;
}

.maincontent {
    background-color:#3F6;
    float:left;
    width:50%;
    margin-left:30%;
}

.leftSidebar {
    background-color:#C63;
    float:left;
    width:30%;
    margin-left:-80%;
}

.rightsidebar {
    background-color:#66F;
    float:left;
    width:20%;
}

HTML

<div class="wrapper">
    <div class="maincontent">
        <!-- main content goes here -->
    </div>

    <div class="leftSidebar">
        <!-- left sidebar content goes here -->
    </div>

    <div class="rightsidebar">
        <!-- right sidebar content goes here -->
    </div>
</div>

如何将.wrapper定位到中心？有一个简单的方法吗？

另外，使用left / right属性和margin-left / margin-right之间的区别是什么？

Answer 1

.wrapper {
    width:1000px;
    position:absolute;
    left:50%;
    margin-left:-500px;
}

Answer 2

我的回答是：跳过绝对定位，并使用margin:0 auto;将内容居中（顶部和底部没有边距，左右自动边距）。

.wrapper
{
    background-color:#F0C;
    width:1000px;
    height:400px;
    margin:0 auto;
}

将绝对div与中心对齐

2 个答案: