简单教程
提交运行
代码编辑器：
<!DOCTYPE html> <meta charset="utf-8"> <link href="/static/next/css/tryit.css?v=2017082407" rel="stylesheet"/> <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> <h2>居中</h2> <p>以下范例中，我们使用了 positioning 和 transform 属性来设置水平和垂直居中：</p> <div class="center"> <p>我是水平和垂直居中的。</p> </div> <p>注意: IE8 及更早版本不支持 transform 属性。</p> <footer>简单教程，简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>
运行结果：