Question

如果没有javascript，真的没有办法将绝对/相对定位的元素居中吗？我知道如果元素的宽度是可靠的，这很容易。有没有CSS解决方案？我被迫诉诸javascript吗？

<body><div class="parent"><div class="child">This stuff changes</div></div></body>

.child{margin:auto;position:absolute;left:50%} // this will center the left edge
.parent{width:800px;height:430px;margin:auto;overflow:hidden;}

Answer 1

怎么样：

.child {
    margin-left: auto;
    margin-right: auto;
    display: table;
}

完整演示html：

<html>
<head>
    <style type="text/css" media="screen">
    .child {
        margin-left: auto;
        margin-right: auto;
        display: table;
    }
    </style>
</head>
<body>
    <!-- middle marker to test alignment -->
    <table width="100%"><tr><td align="center" width="100%">|</td></tr></table>
    <!-- actual thing we're trying to center -->
    <div class="parent">
        <div class="child">123456789|987654321</div>
    </div>
</body>

（来源：http://solstice.co.il/blog/2008-02-26/horizontally-centering-content-dynamic-width-css）

对于垂直居中：

<html>
<head>
    <style type="text/css" media="screen">
    .parent {
        width:800px;
        height:430px;
        margin:auto;
        overflow:hidden;
        border:2px solid cyan;
        border-radius:25px;
        -moz-border-radius:25px; /* Firefox 3.6 and earlier */
    }
    .evilStepMother { /* i.e. comes between the parent and child */
        display: table-cell;
        vertical-align: middle;
        width: 800px; /* i.e. matches parent */
        height: 430px; /* i.e. matches parent */
        border:2px solid green;
        border-radius:25px;
        -moz-border-radius:25px; /* Firefox 3.6 and earlier */
    }
    .child {
        margin: auto;
        display: table;
        border:2px solid red;
        border-radius:25px;
        -moz-border-radius:25px; /* Firefox 3.6 and earlier */
    }
    </style>
</head>
<body>
    <!-- middle marker to test alignment -->
    <table width="100%"><tr><td align="center" width="100%">|</td></tr></table>
    <!-- actual thing we're trying to center -->
    <div class="parent"><div class="evilStepMother">
        <div class="child">123456789|987654321</div>
    </div></div>
</body>

注意：边界只是为了让人们更容易看到事情的布局;弯曲的角落更好。

（来源：http://blog.themeforest.net/tutorials/vertical-centering-with-css/）

以响应绝对定位元素为中心

1 个答案: