这是我的 HTML 代码:
<!DOCTYPE html>
<html>
<head>
<title>Start</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="wrapper">
<a href="start.html" id="start-button">Start</a>
</div>
</body>
</html>
这是我的 CSS:
* {
margin: 0;
padding: 0;
}
div#wrapper {
width: 100%;
height: 100%;
background-color: black;
overflow: hidden;
}
a#start-button {
/* How to center? *?
}
我的问题是:如何使链接垂直居中？我不想给页面一个固定的高度。我尝试了一些选项，但它们都没有真正起作用或无法解决我的问题。 非常感谢!
最佳答案
你需要给父级 div display: table 和子级 display : table-cell with vertical-align: middle
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
div#wrapper {
width: 100%;
height: 100%;
background-color: black;
overflow: auto;
display: table;
}
a#start-button {
display: table-cell;
vertical-align: middle;
text-align: center;
}
关于html - 以 HTML 格式在屏幕上垂直居中链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19159760/