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

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

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


Leave a Reply

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