chap1:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
html,body{
width:100%;
height:100%;
}
#d1 {
width: 30%;
height: 100%;
display: table;
text-align:center;
}
#d1 div{
width:100%;
height:30%;
display :table-row;
}
#d1 div a {
font-size:50px;
height: 30%;
width: 100%;
display: table-cell;
vertical-align: middle;
text-decoration:none;
}
a:visited {
color: #6495ED;
}
</style>
</head>
<body>
<div id="d1">
<div><a style="background:#E1EBF5" href="#">1</a></div>
<div><a style="background:#341d1d">2</a></div>
<div><a style="background:#9c2c2c">3</a></div>
</div>
</body>
</html>
chap2:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
html,body{
width:100%;
height:100%;
}
#d1 {
width: 100%;
height: 50%;
display: table;
text-align:center;
}
#d1 div{
width:100%;
height:100%;
display :table-row;
}
#d1 div a{
font-size: 50px;
height: 100%;
width: 30%;
display: table-cell;
vertical-align: middle;
text-decoration: none;
}
a:visited {
color: #6495ED;
}
</style>
</head>
<body>
<div id="d1">
<div>
<a style="background:#E1EBF5" href="#">1</a>
<a style="background:#341d1d">2</a>
<a style="background:#9c2c2c">3</a>
</div>
</div>
</body>
</html>