在父级 div 内水平和垂直居中显示 div？

Question

我想知道如何在父项 div 中水平和垂直居中 div。

目前我的 div 是水平垂直的，但不是垂直水平的。

有人可以告诉我哪里出错了吗？谢谢

期望的结果：

|- - - - - - - - -
|                 |
|      [   ]      |
|                 |
|                 |
 - - - - - - - - -

HTML:

<div class="primary_container"> 

<div class="home_column" id="login_box"></div>

</div>

CSS:

.primary_container{
    width:900px;
    height:100%;
    position:relative;
    margin:auto;
   background: rgba(230, 155, 0, 0.7); 
    text-align:center;
  z-index:2;

}


.home_column{ 
    width: 30%;
    margin: 0 auto;
    min-height:240px;
    text-align:center;
     position:relative;
     background: rgb(0, 0, 0); /* The Fallback */
   background: rgba(138, 138, 138, 0.2); 
    border: 1px solid #666666;
 -webkit-box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
-moz-box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
cursor:pointer;
cursor:hand;
text-shadow: 0px 2px 3px #999;
color:#000;
padding-top:20px;
padding-bottom:20px;
z-index:2;

}

Answer 1

.home_column{ 
    width: 30%;
    margin: auto;
    max-height:240px;
    text-align:center;
     background: rgb(0, 0, 0); /* The Fallback */
   background: rgba(138, 138, 138, 0.2); 
    border: 1px solid #666666;
 -webkit-box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
-moz-box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
cursor:pointer;
cursor:hand;
text-shadow: 0px 2px 3px #999;
color:#000;
padding-top:20px;
padding-bottom:20px;
z-index:2;

position:absolute;
top:0px;
bottom:0px;
right:0px;
left:0px;


}

使用绝对位置，并给 child div 一个最大高度。

我还建议查看下面的 link，它提供了在任何给定情况下如何将 div 居中的完整详细信息

https://css-tricks.com/centering-css-complete-guide/

https://css-tricks.com/centering-in-the-unknown/

希望对您有所帮助。

Answer 2

我最喜欢的居中元素方式是使用 display: flex。您所要做的就是将三个属性应用于 parent / 包含 class.

这是一个基本的工作 jsFiddle 示例。

css:

.parent{
    display:flex;
    display:-webkit-flex;
    justify-content:center;
    align-items:center;
    //...more styles
}

这是使用 flexbox 更新的代码：

.primary_container{
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    align-content:center;
    justify-content:center;
    width:900px;
    height:100%;
    background: rgba(230, 155, 0, 0.7); 
    text-align:center;
    z-index:2;
}


.home_column{ 
    display:-webkit-flex;
    display:flex;
    align-content:center;
    justify-content:center;    
    width: 30%;
    min-height:240px;
    background: rgb(0, 0, 0); /* The Fallback */
    background: rgba(138, 138, 138, 0.2); 
    border: 1px solid #666666;
    -webkit-box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
    -moz-box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
    box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
    cursor:pointer;
    cursor:hand;
    text-shadow: 0px 2px 3px #999;
    color:#000;
    z-index:2;
}

这是使用您修改后的代码的工作 fiddle：

jsFiddle

在 css-tricks

上了解有关 flexbox 的更多信息

注：browser support

在父级 div 内水平和垂直居中显示 div？

display div horizontally and vertically center inside parent div?

css

center

jsFiddle