源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>编程字典</title> <style> .center { height: 200px; position: relative; border: 3px solid green; } .center p { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } </style> </head> <body> <h2>居中</h2> <p>在这个实例中, 我们使用定位和transform属性实现元素的水平和垂直居中:</p> <div class="center"> <p>我水平垂直居中.</p> </div> <p>注意: transform属性不支持IE8和更早的版本.</p> </body> </html>
运行结果