除了table话之后用vertical-align:
<div class="wrapper"> <div class="half-column" data-bg="red"></div> <div class="half-column" data-bg="blue"></div> <div class="vertical-center"></div> </div>
.wrapper { margin: 0 auto; width: 600px; height: 400px; } .half-column { float: left; width: 50%; height: 100%; @each $color in red, blue { &[data-bg=#{$color}] { background-color: $color; } } } .vertical-center { position: relative; top: 50%; transform: translateY(-50%); margin: 0 auto; width: 200px; height: 200px; background-color: #ccc; }
感谢作者nightire
原文：http://www.cnblogs.com/hiytom/p/4765929.html