Question

首先，不确定它是否相关，但我使用的是Bootstrap 3.

因此，对于我页面的这一部分（其下方还有更多），我将视口高度设置为100，并且在其中有两行，每行占据该视口的50％。在第一行是我试图水平和垂直居中的图像。在第二行是我试图水平居中并固定在底部的图像。 html看起来像这样：

＆＃13;

<div class='row vh-100'>
    <div class='col-xs-12 col-sm-12 col-md-12 col-lg-12 height-100'>

        <!-- tats -->
        <div class='row height-50'>
            <div class='col-xs-12 col-sm-12 col-md-12 col-lg-12 relative height-100'>
                <img src='images/logo.png' 
                     class='img-responsive block absolute center middle max-height-100'>
            </div>
        </div>

        <!-- silhouette -->
        <div class='row height-50'>
            <div class='col-xs-12 col-sm-12 col-md-12 col-lg-12 relative height-100'>
                <img src='images/silhouette.png' 
                     class='img-responsive block absolute center bottom max-height-100'>
            </div>
        </div>

    </div>
</div>

＆＃13;

CSS看起来像这样：

＆＃13;

.block{
	display: block;
}

.absolute{
	position: absolute;
}

.relative{
	position: relative;
}

.vh-100{
	height: 100vh;
}

.vh-50{
	height: 50vh;
}

.height-100{
	height: 100%;
}

.height-50{
	height: 50%;
}

.center{
    margin-left: auto;
    margin-right: auto;
}

.top{
	top: 0%;
}

.middle{
	top: 50%;
}

.bottom{
	bottom: 0%;
}

.max-height-100{
	max-height: 100%;
}

＆＃13;

所以我遇到的是：除非我将他们的位置改为亲戚，否则两个图像都不会水平居中。此外，第一个图像在整个页面内垂直居中，而不是包含在其中的div。任何想法？

Answer 1

绝对位置元素的中心如下：

#element {
 left:50%;
 top:50%;
 transform:translate(-50%,-50%);
}

（不要忘记为转换添加供应商：-webkit-transform等）

另外，如果你知道绝对元素的宽度，你可以使用：

margin-left:-halfelemwidth;
margin-top:-halfelemheight;

这将有助于支持不支持css转换的旧版浏览器

编辑：打字时太累了，下面的用户引起我的注意，边距顶部和边距左边应该是一半而不是全部。

edit2：您也可以尝试这种方法。

对于高度使用的父元素：

display:table-cell;
vertical-align:middle;
text-align:center;

这可以使图像居中而不离开容器，并且没有相对和绝对元素。

带位置的图像：绝对不在父div内居中，位置为：relative

1 个答案: