<div class="mdl-layout mdl-js-layout mdl-color--grey-100">
		<main class="mdl-layout__content">
			<form action="#">
				<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
					<input class="mdl-textfield__input" type="text" id="username"/>
					<label class="mdl-textfield__label" for="username">Username</label>
				</div>
			</form>
		</main>
</div>
body {
	text-align: center;
}
.mdl-layout {
	align-items: center;
  justify-content: center;
}
.mdl-layout__content {
	padding: 24px;
	flex: none;
}
.mdl-button {
	margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
}

External CSS

  1. https://fonts.googleapis.com/icon?family=Material+Icons
  2. https://storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css
  3. https://fonts.googleapis.com/css?family=Roboto:300,400,500,700

External JavaScript

  1. https://storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js