水平垂直居中最简单的办法

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div style="width:500px; height:300px; background:pink; text-align:center">
  <p style="height:100%">我是垂直居中最简单的办法<i style="display:inline-block;height:100%; vertical-align:middle"></i></p>
</div>
<br>
<div style="width:500px; height:200px; background:pink; text-align:center">
  <a href="http://www.css119.com" style=" display:block; width:100%;height:100%">我是垂直居中最简单的办法<i style="display:inline-block;height:100%; vertical-align:middle"></i></a>
</div>
<br>
<div style="width:500px; height:600px; background:pink; text-align:center">
  <a href="http://www.css119.com"><img src="http://www.css119.com/wp-content/uploads/2012/11/logo3.png" style="vertical-align:middle"><i style="display:inline-block;height:100%; vertical-align:middle"></i></a>
</div>
</body>
</html>

你可能感兴趣的:(垂直居中)