Categories
Mastering Development

How to vertically centre elements in a div?

I have the following in HTML:

enter image description here

and I want to vertically centre the "Name" and textbox elements in it’s respective div, so that it has even spacing at the top and bottom in the div.

body, html {
    height: 100%;
}

.outer {
    border: 1px solid black;
    height: 20%;
}

.inner {
    border: 1px solid black;
    height: 20%;
}

#name_out {
    height: 70%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>houseform</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class = "outer">
        <div class = "inner">
            <label id = "">Name</label>
            <input type = "text" id = "name_out" disabled class = "output">
        </div>
    </div>

</body>

Leave a Reply

Your email address will not be published. Required fields are marked *