#parent
{
    position : relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25% /* images with aspect ratio: 16:9  */
}

img 
{
    height: auto!important;
    width: auto!important;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    display: block;
    /*  */
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

我不记得我在哪里看到了上面列出的居中方法，使用负的上、右、下、左值。 对我来说，在大多数情况下，这个技巧是最好的。

当我使用上面的组合时，图像的行为就像一个背景图像，具有以下设置:

background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;

关于第一个例子的更多细节可以在这里找到: 使用CSS维护div的纵横比

目前似乎有两种解决方案;边距居中，位置居中。这两种工作都很好，但是如果您想要相对于这个居中元素的绝对位置，则需要使用绝对位置方法，因为第二个元素的绝对位置默认为所定位的第一个父元素。像这样:

<!-- CENTERED USING MARGIN -->
<div style="width:300px; height:100px; border: 1px solid #000; margin:20px auto; text- align:center;">
    <p style="line-height:4;">width: 300 px; margin: 0 auto</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:-20px; left:0px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

<!-- CENTERED USING POSITION -->
<div style="position:absolute; left:50%; width:300px; height:100px; border: 1px solid #000; margin:20px 0 20px -150px; text-align:center;">
    <p style="line-height:2;">width:300px; position: absolute; left: 50%; margin-left:-150px;</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:0px; left:-105px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

直到我读到这篇文章，使用边距:0自动技术，在我的内容的左边建立一个菜单，我必须在右边建立一个相同宽度的列来平衡它。不漂亮。谢谢!

下面是使用“position: absolute”的中心元素的简单且最佳的解决方案

身体,html { 最小高度:100%; ｝ div.center { 宽度:200 px; 左:50%; Margin-left:-100px;/*这是元素宽度的50% 位置:绝对的; 背景:# ddd; 边框:1px实体#999; 身高:100 px; text-align:中心 ｝ <时尚> > < /风格 身体< > < div class = >“中心” 应该垂直居中 < / div > 身体< / >

使用margin-left: x%;其中x是元素宽度的一半。

一个简单的CSS技巧，只需添加:

width: 100%;
text-align: center;

这对图像和文本都有效。

使用 左:calc(50% - Wpx/2);其中W是元素的宽度。