我的中间盒垂直居中

Question

我有3个街区。我想将中间块（固定高度）垂直居中。因此，当用户调整页面高度时，此框仍然居中。

JsFiddle：http://jsfiddle.net/CH9K8/3446/

＆＃13;

＆＃13;

body, html {
    height: 100%;
    margin: 0px;
}
#container {
    width:100%;
    height: 100%;
    text-align:center;
}
#left {
    float:left;
    width: calc(50% - 40px);
    background: #ff0000;
    text-align: left;
}
#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
    height: 100px;
    background: #00ff00;
    vertical-align: middle;
}
#right {
    float:right;
    width: calc(50% - 100px);
    background: #0000ff;
    text-align: left;
}

＆＃13;

<div id="container">
  <div id="left">
      xxxxxx xxxxx xxxxx xxxxxx xxxxx xxxxx xxxxxx xxxxx xxxxx xxxxxx xxxxx xxxxxxxxxxx xxxxx xxxxx xxxxxx xxxxx xxxxxxxxxxx xxxxx xxxxx xxxxxx xxxxx xxxxxxxxxxx xxxxx xxxxx xxxxxx xxxxx xxxxxxxxxxx xxxxx xxxxx xxxxxx xxxxx xxxxxxxxxxx xxxxx xxxxx xxxxxx xxxxx xxxxxxxxxxx xxxxx xxxxx xxxxxx xxxxx xxxxx
  </div>
  <div id="center">
      yyyyyyyyyyyy
      <br/>
      yyyyyyyyyyyy
      <br/>
      yyyyyyyyyyyy
      <br/>
      yyyyyyyyyyyy
      <br/>
      yyyyyyyyyyyy
      <br/>
  </div>
  <div id="right">
      zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

感谢。

Answer 1

您可以尝试这样： -

#container {
    width:100%;
    height: 100%;
    text-align:center;
   -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

和

#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
    height: 100px;
    background: #00ff00;
    vertical-align: middle;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

body, html {
    height: 100%;
    margin: 0px;
}
#container {
    width:100%;
    height: 100%;
    text-align:center;
   -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#left {
    float:left;
    width: calc(50% - 40px);
    background: #ff0000;
    text-align: left;
}
#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
    height: 100px;
    background: #00ff00;
    vertical-align: middle;
   position: relative;
  top: 50%;
  transform: translateY(-50%);
  
}
#right {
    float:right;
    width: calc(50% - 100px);
    background: #0000ff;
    text-align: left;
}

<div id="container">
  <div id="left">
      xxxxxx xxxxx xxxxx xxxxxx xxxxx xxxxx xxxxxx xxxxx xxxxx xxxxxx xxxxx xxxxxxxxxxx xxxxx xxxxx xxxxxx xxxxx xxxxxxxxxxx xxxxx xxxxx xxxxxx xxxxx xxxxxxxxxxx xxxxx xxxxx xxxxxx xxxxx xxxxxxxxxxx xxxxx xxxxx xxxxxx xxxxx xxxxxxxxxxx xxxxx xxxxx xxxxxx xxxxx xxxxxxxxxxx xxxxx xxxxx xxxxxx xxxxx xxxxx
  </div>
  <div id="center">
      yyyyyyyyyyyy
      <br/>
      yyyyyyyyyyyy
      <br/>
      yyyyyyyyyyyy
      <br/>
      yyyyyyyyyyyy
      <br/>
      yyyyyyyyyyyy
      <br/>
  </div>
  <div id="right">
      zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz zzzzz zzzzzz zzzzzz
  </div>
</div>

Answer 2

尝试使用中间框：

top: 50%;
position: relative;
margin-top: -50px;

top: 50%解释了自己。但问题是容器的顶部是垂直居中的，而不是容器本身。要纠正margin-top: -50px是必要的，50px是容器的半高。

小提琴：http://jsfiddle.net/CH9K8/3447/

Answer 3

你可以试试这个 -

#center {
    display: inline-block;
    width:100px;
    height: 100px;
    background: #00ff00;
    position:relative;
    top:calc(50% - 50px);
}