Skip to content

Instantly share code, notes, and snippets.

@tutweb

tutweb/CSS-Center-element.html

Created January 26, 2013 16:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save tutweb/4643102 to your computer and use it in GitHub Desktop.
Save tutweb/4643102 to your computer and use it in GitHub Desktop.
Download ZIP
Centering an element with css
Raw
CSS-Center-element.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Position Center</title>
<style>
.container{
border:20px solid rgba(0,0,0,.5);
width: 400px;
height: 200px;
background: yellow;
position: fixed;
top: 50%;
left: 50%;
margin-top: -140px;
margin-left: -240px;
text-align: center;
padding:40px;
display: table;
}
.box{
background:orange;
display: table-cell;
text-align: center;
vertical-align: middle;
border:50px solid rgba(0,0,0,.2);
}
</style>
</head>
<body>
<h2><a href="http://www.tutorial-webdesign.com">Tutorial-webdesign.com</a></h2>
<div class="container">
<div class="box">
<b>Goooogle</b>
<form action="">
<input type="text" name="" id=""><br>
<input type="submit" value="Search">
</form>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment