Small盒子位于Big盒子中央位置.同时,文字也位于Smalll盒子的中央位置.通过calc函数进行辅助计算.
上代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS计算函数calc的测试</title> <style type="text/css"> .Big{ width:350px; height:400px; background-color:#00F; position:relative; } .Small{ width:50%; height:100px; background-color:#F00; position:absolute; top:calc((100% - 100px)/2); left:calc((100% - 50%)/2); top:-webkit-calc((100% - 100px)/2); left:-webkit-calc((100% - 50%)/2); top:-moz-calc((100% - 100px)/2); left:-moz-calc((100% - 50%)/2); text-align:center; line-height:100px; } </style> </head> <body> <div class="Big"> <div class="Small"> 居中的字 </div> </div> </body> </html>