html - 垂直居中中间框

Question

我有 3 个积木。我想让中间 block (固定高度)垂直居中。所以当用户调整页面高度时，这个框仍然居中。

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

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;
}

<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 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>