可以用“绝对”中心来居中div。父母？ [英] Is it possible to center div with "absolute" parent?

问题描述

<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？

So is it possible to center div in current situation?

推荐答案

如果你知道div的高度为中心（我想假设它是.text）您可以：

If you know the height of the div you are centering (I'm going to assume it is .text), then you can do:

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

在父容器的50％处的div的顶部。

All this does if places the top of the div at 50% of the parent container. The margin-top pushes it up so the center is at the center of the parent.

编辑：使用transforms显示示例：

Show example using transforms:

.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%);
}

这不适用于不支持tranforms的浏览器。请参阅此 http://jsfiddle.net/WEQVK/

This won't work on browsers that don't support tranforms though. See this http://jsfiddle.net/WEQVK/

这篇关于可以用“绝对”中心来居中div。父母？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！