居中响应绝对定位元素

真的没有办法将没有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;}

来源

2012-10-18 Scott Hillson

如何：

.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/）

来源

2012-10-18 20:32:52 JohnLBevan

ps。有关IE兼容性的信息，请参阅链接 – JohnLBevan

这是相当有创意的答案，表格。 –

确实很聪明！ –

居中响应绝对定位元素

回答

相关问题