如何在div中居中div？

Question

我的HTML是如下：

<div id="background_div"> 
    <img id="background_img" src="images/background.jpg" alt="dont matter"> 
    <i class="material-icons">perm_identity</i> 
    <div id="dropdown"> 
     <ul id="dropdown2" class="dropdown-content"> 
     <li><a href="#!">one<span class="badge">1</span></a></li> 
     <li><a href="#!">two<span class="new badge">1</span></a></li> 
     <li><a href="#!">three</a></li> 
     </ul> 
     <a class="btn dropdown-button" href="#!" data-activates="dropdown2">Select Service<i class="mdi-navigation-arrow-drop-down right"></i></a> 
    </div> 
    </div> 

我改变了语法有div ID为“background_div”（父/子）内的div id为“下拉”因为我认为它可以帮助我中心使用某种相对CSS功能。我最初有两个divs作为兄弟姐妹......基本上，我想要实现的是在background_div中获得下拉div。很高兴以一种快速响应的方式来做到这一点。

任何人都可以请提供一些CSS脚本来帮助我实现吗？

谢谢！

Answer 1

这个CSS利用的Flexbox

#background_div { 
    display: flex; 
} 

#dropdown { 
    justify-content: center; 
} 

Answer 2

您可以添加到text-align: center;的#background_div CSS样式，但随后的#background_div内一切都会中心。如果你只希望某些部分为中心，环绕这些部件在<span>标签，与类centered，所以<span class="centered">。然后在你的CSS，加入

.centered { 
    text-align: center; 
} 

现在你可以添加各地要居中任何一个<span class="centered">。

Answer 3

我最喜欢的方法，以垂直居中的东西是要做到：

/* the div you want centered inside another div*/ 

#dropdown { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
} 

/* set the parent div to position relative */ 

#background_div { 
    position: relative; 
} 

这大概会弄乱你的水平中心，如果你正在使用文本对齐中心。在这种情况下它添加到你的CSS

width: 100px; /* give it any width that fits */) 
margin: 0 auto; 

所以您的最终代码如下：

#dropdown { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 100px; 
    margin: 0 auto; 
} 

#background_div { 
    position: relative; 
}