Question

我只是好奇最好的方法是在另一个div中心（垂直和水平）对齐div。这个例子有一个红色div，我想垂直和放大div中的水平居中与背景图片。

这样做的最佳方式是什么，以便在调整浏览器窗口大小时自动适应。在手机上显示？

以下方法失败：

位置：相对; ＆安培;最高：50％; - 只有div的顶部是集中的，而不是其余的。添加负边距顶部失败，因为它将其应用于父元素
保证金：25％自动;
vertical-align：middle;
辩解 - 内容：中心; - 大概只适用于flexboxes

以下是代码：

＆＃13;

//div[@class='school_row_cell_content']/br[2]/following-sibling::text()[1]

＆＃13;

body{
    background: yellow;
    margin: 0 auto;
}

#first{
    width:100%;
    height:550px;
    background: url('https://static.pexels.com/photos/30627/pexels-photo-30627.jpg');
    background-size: cover;
}

#central{
    width:200px;
    height:100px;
    background: red;
    margin: 0 auto;
    
    /*
    
    Why DO THESE FAIL:
    
    position:relative; & top: 50%;
    
    margin: 25% auto;
    
    vertical-align: middle;
    
    justify-content: center; - presumably only applies to flexboxes
    
    */
}

＆＃13;

感谢您的帮助。

Answer 1

我认为最好的方法是使用flexbox。检查这个惊人的post about flexbox。

父div的css必须是这样的：

{{1}}

在另一个div中集中div的最佳方法

1 个答案: