可以用“绝对”中心来居中div。父母？

问题描述：

<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。父母？

相关推荐