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;


}

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

我还建议您查看下面的链接，这提供了有关如何在任何给定情况下居中的详细信息

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

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

我希望它有所帮助。

Answer 2

我最喜欢的中心元素是使用display: flex。您所要做的就是将三个属性应用于父/包含类。

这是一个基本的工作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;
}

以下是您修改过的代码的工作小提琴：

jsFiddle

了解有关css-tricks

上的flexbox的详情

注意：browser support

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

2 个答案:

jsFiddle