以div为中心的图像

Question

我有一个登陆页面，我想让我的徽标居中。苦苦思索如何将其准确地放在中心并在设备规模上保持不变。我有相应的视频背景，但我无法让我的徽标完全进入中心。

这是一个小提琴http://jsfiddle.net/dm1ccm7n/1/

显示了一个黑盒子，在广场上，我想要在着陆div中居中。

这是需要整理的特定div。

.main_logo{
    background:#000;
    position:relative;
    float:left;
    width:300px;
    height:200px;
    z-index:2000;
    display: block;
    margin: auto;
}

Answer 1

两个简单的选择：

• 将margin:0 auto添加到您想要居中的元素
• 将display: flex; justify-content: center; align-items: center;添加到父/包装元素

如果第一个不起作用，第二个选项肯定应该。工作原理：

justify-content定义flex项目根据主轴对齐的位置（在我们的例子中水平）。

align-items对垂直于主轴的轴做同样的事（在我们的例子中是垂直的）。