是否可以将 div 与“绝对”父级居中？答案

【问题标题】：Is it possible to center div with "absolute" parent?是否可以将 div 与“绝对”父级居中？
【发布时间】：2013-06-22 17:39:45
【问题描述】：

<style type="text/css">
.square {
    width:251px;
    height:207px; 
    border: 1px solid #d6d6d6;
    -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,.1);
    -moz-box-shadow: 1px 1px 3px rgba(0,0,0,.1);
    box-shadow: 1px 1px 3px rgba(0,0,0,.1);
    margin: 10px;
    overflow: hidden;
    position: relative;
    background-color:#fff;
    /*display: inline-block;*/
    float: left;
    cursor: pointer;
    text-align: left;
}
.square img {
    display: block;
    margin: 0px;
    padding: 9px;
    width:234px !important;
    height:190px !important;
    position:absolute;
}
.square .caption {
    width:214px;
    height:170px;
    background:#000;
    color:#fff;
    padding:10px;
    position:absolute;
    left:9px;
    top:9px;
    /*display:none;*/
    filter:alpha(opacity=80);
    -moz-opacity:0.8;
    -khtml-opacity: 0.8;  
    opacity: 0.8;
}
.square .text{
    border:1px dotted #d6d6d6;
    margin: 10px;
    padding: 5px;
    vertical-align: center;
    max-height: 100px;
    overflow: auto;
}
.square .until {
    font-size: 12px;
    font-style: italic;
    position: absolute;
    right: 10px;
    bottom: 5px;
}
</style>

<div class="square">
    <a href="/" >
        <img width="234" height="190" src="files/2011/12/17.jpg"  alt="17" title="17"/>
    </a>
    <a href="/" rel="bookmark">
        <div class="caption">
            <h2>Half A Beatle</h2>
            <div class="text">lol</div>
            <div class="until">Until: 01 01 2012</div>
        </div>
    </a>
</div>

那么在当前情况下是否可以将 div 居中？

【问题讨论】：

哪个div？据我所知，它以@kirix为中心
您是否要在虚线边框@kirix 内居中文本
我假设他想将div.text 垂直居中，如左图所示，尽管这看起来很糟糕。我不完全确定这是否可能。也许你应该看看vertical-align:middle;。
@TheCOMPLETEPHPNewbie 我需要中心点在父项中
@sharethis 是的，你说得对，所以问题从“有可能......”开始

标签： html css

【解决方案1】：

单独使用 CSS 完全有可能，但您需要进行一些在 IE6 / 7 中不起作用的有趣更改。

如果您的父容器设置为display: table-cell 和vertical-align: middle，而子元素设置为display: inline-block，您将获得内容居中居中的表格效果。

See for yourself!

【讨论】：

【解决方案2】：

有点晚了，但这是我的答案...... 诀窍是除了我们的文本容器 div 之外还有一个辅助 div，如下面的代码...... 我希望这会有所帮助：D

<div style=" position: absolute;
             display: inline-block;
             top: 20%;
             bottom: 20%;
             right: 20%;
             left: 20%;
             background-color: #434154;
             text-align: center;">
    <div style="display: inline-block;
                height: 100%;
                vertical-align: middle;"></div>
    <div style="position: relative;
                color: #FFFFFF;
                background-color: #546354;
                display: inline-block;
                vertical-align: middle;">
               THIS IS CENTERED WITHOUT SCRIPTING :D
    </div>
</div>

【讨论】：

【解决方案3】：

如果您知道要居中的 div 的高度（我假设它是 .text），那么您可以这样做：

.square .text {
    height: 100px;
    top: 50%;
    margin-top: -50px; /* This should be half of height */
}

如果将 div 的顶部放置在父容器的 50% 处，所有这一切都会发生。 margin-top 将其向上推，因此中心位于父级的中心。

编辑：显示使用变换的示例：

.square .text{
    border:1px dotted #d6d6d6;
    margin: 0 10px;
    padding: 5px;
    vertical-align: center;
    max-height: 100px;
    overflow: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

这不适用于不支持转换的浏览器。看到这个http://jsfiddle.net/WEQVK/

【讨论】：

我们可以假设问题中右图的高度没有固定。