解决方法
这应该适合你的需要。这是一个css-2D过渡的诡计。我最近遇到了以下解决方案:
HTML:
<h1 class="title">3 Boxes with different text-align settings.</h1> <div class="blocks"> <div class="block h-center">horizontally centered lorem ipsun dolor sit amet</div> <div class="block v-center"><span>vertically centered lorem ipsun dolor sit amet lorem ipsun dolor sit amet</span></div> <div class="block h-center v-center"><span>horizontally and vertically centered lorem ipsun dolor sit amet</span></div> </div>
CSS
* { font-family: Arial; font-size: 14px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } *:after,*:before { content: ""; display: table; } *:after { clear: both; } .title { font-family: Georgia; font-size: 36px; line-height: 1.25; margin-top: 0; } .blocks { position: relative; } .block { position: relative; display: inline-block; float: left; width: 200px; height: 200px; font-weight: bold; color: #FFFFFF; margin-right: 10px; margin-bottom: 10px; } .block:first-child { background-color: green; } .block:nth-child(2) { background-color: red; } .block:nth-child(3) { background-color: blue; } .h-center { text-align: center; } .v-center span { position: absolute; left: 0; right: 0; top: 50%; transform: translate(0,-50%); }
注意:这也适用于:after和:before伪元素。
您也可以在这里阅读:css-tricks.com
你可以在这里测试:jsfiddle