中间对齐另一个 div 内的 div 与中间对齐内容答案

【问题标题】：middle aligning a div inside another div with middle alligned content中间对齐另一个 div 内的 div 与中间对齐内容
【发布时间】：2013-06-08 18:04:13
【问题描述】：

我有两个 div，一个在另一个内部，内部 div 有一个中间对齐的 p 标签。标记是

<div class="box1">
    <div class="box2">
        <p>hello</p>
    </div>
</div>

样式规则是

.box1 {
    width: 400px;
    height: 400px;  
    background: red;
    text-align: center;
}
.box2 {
    display: table-cell;
    width: 200px;
    height: 200px; 
    margin: auto;
    vertical-align: middle; 
    text-align: center;   
    background: yellow;
}

我想要做的是在内部 div(box2) 内垂直和水平地居中 p 标签，并在外部 div (box1) 中垂直和水平地居中内部 div。我未能将内部 div(box2) 居中在外部 div 内。请帮我做。我为此创建了一个小提琴 -> http://jsfiddle.net/64WAW/1/

【问题讨论】：

标签： html css positioning centering

【解决方案1】：

请看这个：

http://jsfiddle.net/itz2k13/64WAW/2/

.box1 {
 display: table-cell;
 width: 400px;
 height: 400px;  
 background: red;
 text-align: center;
 vertical-align: middle;
}

.box2 {    
 width: 200px;
 height: 200px; 
 background: yellow;
 margin: auto;
 line-height: 200px;
}

【讨论】：

@solom: display:table-cell 对浏览器不友好，旧浏览器不支持。应该避免它
@solom：你可以检查一下。因为我过去在使用 display:table,display:table-row,display:table-cell 时遇到了问题。在下面查看我的答案，避免显示：table-cell

【解决方案2】：

你会用flexbox，很简单。就是这样：

.box1,
.box2{
  display: -moz-box; /*Safari,  iOS, Android browser, older WebKit browsers. */
  display: -webkit-box;/* Firefox (buggy) */
  display: -ms-flexbox; /*IE 10*/
  display: -webkit-flex;/*Chrome 21+ */
  display: flex;/*Opera 12.1, Firefox 22+ */

  -webkit-box-align: center; 
  -moz-box-align: center;
  -ms-flex-align: center; 
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center; 
  -moz-box-pack: center; 
  -ms-flex-pack: center; 
  -webkit-justify-content: center;
  justify-content: center;
}
.box1{
    width: 400px;
    height: 400px;  
    background: red;
    text-align: center;     
}
.box2 {
    background: yellow;
    width: 200px;
    height: 200px;
}

请查看demo，详情请查看tutorial

【讨论】：

【解决方案3】：

HTML：

<div class="box1">
    <div class="box2container">
        <div class="box2">
            <p>hello</p>
        </div>
    </div>
</div>

CSS：

.box1 {
    width: 400px;
    height: 400px;  
    background: red;
    text-align: center;
}
.box2 {
    position:relative;
    top:-50%;
    left:-50%;
    width: 200px;
    height: 200px; 
    background: yellow;
    line-height:200px;
}

.box2container{
    width: 200px;
    height: 200px; 
    position:relative;
    top:50%;
    left:50%;
}

此解决方案避免使用旧版浏览器不支持的display:table-cell。查看fiddle

【讨论】：

【解决方案4】：

使用 display:inline-block 并为它添加 :after 父容器：

.box1 {
    width: 400px;
    height: 400px;  
    background: red;
    text-align: center;
}
.box2 {
    display: inline-block;
    width: 200px;
    height: 200px; 
    vertical-align: middle; 
    text-align: center;   
    background: yellow;
}
.box1:after {
  content:"";
  width: 1px;
  height: 100%;
  position: relative;
  display: inline-block;
  vertical-align: middle; 
}

demo

【讨论】：