Question

这是我的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? *?
}

我的问题是：如何将链接垂直居中？我不想给页面一个固定的高度。我尝试了一些选项，但它们都没有真正起作用或者不是我的问题。非常感谢你！

Answer 1

<强> See the Demo

您需要向家长div display: table和孩子display : table-cell提供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;
}

Answer 2

尝试在包含div上使用display：table-cell。然后你可以应用vertical-align：middle。

Answer 3

你去吧

选项 - 1

<强> WORKING DEMO

HTML：

<div id="wrapper">
    <a href="start.html" id="start-button">Start</a>
</div>

CSS：

* {
    margin: 0;
    padding: 0;
}

div#wrapper {
    width: 100%;
    height: 100%;

    background-color: black;

    overflow: hidden;
}

a#start-button {
    display: list-item;
    list-style: none outside none;
    text-align: center;
}

CSS代码更改：

a#start-button {
    display: list-item;
    list-style: none outside none;
    text-align: center;
}

选项 - 2

<强> WORKING DEMO

HTML：

<div id="wrapper">
    <a href="start.html" id="start-button">Start</a>
</div>

CSS：

* {
    margin: 0;
    padding: 0;
}

div#wrapper {
    width: 100%;
    height: 100%;
    display:table;

    background-color: black;

    overflow: hidden;
}

a#start-button {
    display: table-cell;
    text-align:center;
}

代码更改：

div#wrapper {
    width: 100%;
    height: 100%;
    display:table;

    background-color: black;

    overflow: hidden;
}

    a#start-button {
        display: table-cell;
        text-align:center;
    }

希望这有帮助。

HTML中屏幕上的垂直中心链接

3 个答案: