CODEWITHSUNDEEP
htmlcsscenter
DennisvB
DennisvB

Reputation: 1018

Vertically center link on screen in HTML

This is the HTML code I have:

<!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>

This is my CSS:

* {
    margin: 0;
    padding: 0;
}

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

    background-color: black;

    overflow: hidden;
}

a#start-button {
    /* How to center? *?
}

My question is: How can I center the link vertically? I don't want to give the page a fixed height. I tried some options, but they were all not really working or not exacty my problem. Thank you very much!

Upvotes: 0

Views: 1103

Answers (3)

sma
sma

Reputation: 9597

Try using display:table-cell on the containing div. Then you can apply a vertical-align:middle to it.

Upvotes: 0

Vikas Ghodke
Vikas Ghodke

Reputation: 6665

See the Demo

You need to give the parent div display: table and child 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;
}

Upvotes: 1

Nitesh
Nitesh

Reputation: 15779

Here you go

OPTION - 1

WORKING DEMO

The HTML:

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

The 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;
}

The CSS Code Change:

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

OPTION - 2

WORKING DEMO

The HTML:

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

The 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;
}

The Code Change:

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

    background-color: black;

    overflow: hidden;
}

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

Hope this helps.

Upvotes: 0

Related Questions