zelenko/center-of-page.html

## center-of-page.html
<!doctype html>
<html>
<head>
    <title>Center of Page</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css">
    body {
        background-color: #f0f0f2;
        margin: 0;
        padding: 0;
        font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

    }
    div {
        width: 600px;
        margin: 5em auto;
        padding: 50px;
        background-color: #fff;
        border-radius: 1em;
    }
    a:link, a:visited {
        color: #38488f;
        text-decoration: none;
    }
    @media (max-width: 700px) {
        body {
            background-color: #fff;
        }
        div {
            width: auto;
            margin: 0 auto;
            border-radius: 0;
            padding: 1em;
        }
    }
    </style>
</head>

<body>
<div>
    <h1>The center of Page</h1>
    <p>This is how to present info in the center of the page.  </p>
    <p><a href="https://github.com/zelenko/">More information...</a></p>
</div>
</body>
</html>

## center-version-2.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>
	<!doctype html>
	<html>
	<head>
	<title>Center of Page</title>

	<meta charset="utf-8" />
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<style type="text/css">
	body {
	background-color: #f0f0f2;
	margin: 0;
	padding: 0;
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

	}
	div {
	width: 600px;
	margin: 5em auto;
	padding: 50px;
	background-color: #fff;
	border-radius: 1em;
	}
	a:link, a:visited {
	color: #38488f;
	text-decoration: none;
	}
	@media (max-width: 700px) {
	body {
	background-color: #fff;
	}
	div {
	width: auto;
	margin: 0 auto;
	border-radius: 0;
	padding: 1em;
	}
	}
	</style>
	</head>

	<body>
	<div>
	<h1>The center of Page</h1>
	<p>This is how to present info in the center of the page. </p>
	<p><a href="https://github.com/zelenko/">More information...</a></p>
	</div>
	</body>
	</html>