Skip to content

Instantly share code, notes, and snippets.

@zelenko

zelenko/How to center content vertically and horizontally?.md

Last active December 13, 2017 20:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zelenko/85414d0b6dd930a56216cfcfff0d5a04 to your computer and use it in GitHub Desktop.
Save zelenko/85414d0b6dd930a56216cfcfff0d5a04 to your computer and use it in GitHub Desktop.
Download ZIP
How to center content vertically and horizontally?
Raw
gistlog.yml
# https://gistlog.co/zelenko/85414d0b6dd930a56216cfcfff0d5a04
published: true
preview: Here is one simple way to center content on a HTML page. This method is using the CSS text-align and vertical-align properties.
include_files: true
Raw
How to center content vertically and horizontally?.md

Here is one simple way to center content on a HTML page. This method is using the CSS text-align and vertical-align properties.

<!DOCTYPE html>
<html>
    <head>
        <title>Center V2</title>

        <link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">

        <style>
            html, body {
                height: 100%;
            }

            body {
                margin: 0;
                padding: 0;
                width: 100%;
                display: table;
                font-weight: 100;
                font-family: 'Lato';
            }

            .container {
                text-align: center;
                display: table-cell;
                vertical-align: middle;
            }

            .content {
                text-align: center;
                display: inline-block;
            }

            .title {
                font-size: 60px;
            }
            .subtitle {
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="content">
                <div class="title">center-version-2.html</div>
                <div class="subtitle">Display text @ center of page</div>
            </div>
        </div>
    </body>
</html>
Raw
page.html
<!DOCTYPE html>
<html>
<head>
<title>Center V2</title>
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
<style>
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
display: table;
font-weight: 100;
font-family: 'Lato';
}
.container {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.content {
text-align: center;
display: inline-block;
}
.title {
font-size: 60px;
}
.subtitle {
font-size: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="title">center-version-2.html</div>
<div class="subtitle">Display text @ center of page</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment