Question

我这里有codepen，有人知道如何垂直和水平地将h2对齐到div元素的中心吗？

HTML

<div class="container">
   <h2 class="center">
      Hello World!
   </h2>
</div>

的CSS：

 .container {
position:relative !important;
height: 100%;
margin: 0 auto;
 display:table;
}

.center {
text-transform: uppercase;
text-align: center;
z-index: 200;
position: absolute;
  vertical-align:middle;
font-size: 4em;
margin: 0;
padding: 1em .75em 0 .75em;
line-height: .8;
text-shadow: 1px 1px 10px #666666;
  display:table-cell;
}

Answer 1

删除positoin个属性，并为100%和body应用html。

body,html{height:100%; padding:0; margin:0;} 
.container {    
height: 100%;
margin: 0 auto;
padding:0;
 display:table;
}

.center {
text-transform: uppercase;
text-align: center;
z-index: 200;    
vertical-align:middle;
font-size: 4em;
margin: 0;
padding:0;
text-shadow: 1px 1px 10px #666666;
display:table-cell;
}

DEMO

Answer 2

有一个更好的解决方案。但这也是一个：

.container {
    height: 100%;
    border: solid thin #000;
}
body,html{
    height: 100%;
}
.center {
    border: solid thin #ddd;
    text-transform: uppercase;
    z-index: 200;
    position: absolute;
    display: inline-block;
    text-align:center;
    left: 25%;
    right: 25%;
    top: 25%;
    bottom:25%;
    font-size: 4em;
    line-height: .8;
    text-shadow: 1px 1px 10px #666666;
}

Answer 3

display:flex;可能是一个设置很少CSS的提示： http://codepen.io/anon/pen/mEufx

html,body {
  height:100%;
}
.container {
  min-height:100%;
  display:flex;
}

.center { 
  margin:auto;
  text-transform: uppercase;
  font-size: 4em;
  text-shadow: 1px 1px 10px #666666;
}

如何在div中垂直对齐h2元素？

3 个答案: