Skip to content

Instantly share code, notes, and snippets.

@jlcampana

jlcampana/centrar_elemento.css

Created November 25, 2013 09:24
Show Gist options
  • Save jlcampana/7638748 to your computer and use it in GitHub Desktop.
Save jlcampana/7638748 to your computer and use it in GitHub Desktop.
Download ZIP
Centrar un elemento
Raw
centrar_elemento.css
body, html {
height: 100%;
}
div#layout { /* exploder 5.5+ */
position: absolute;
left: 0px;
top: 0px;
overflow: hidden;
text-align: center;
}
* > div#layout { /* normal browsers */
min-width: 790px;
min-height: 490px;
width: 100%;
height: 100%;
}
div#container {
position: relative;
top: 50%;
margin-top: -245px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
div#container div.container-top {
position: absolute;
left: 0px;
top: -1000px;
height: 1000px;
}
div#container div.container-right {
position: absolute;
right: -1000px;
top: 0px;
width: 1000px;
}
div#container div.container-bottom {
position: absolute;
left: 0px;
bottom: -1000px;
height: 1000px;
}
div#container div.container-left {
position: absolute;
left: -1000px;
top: 0px;
width: 1000px;
}
div#container div.container-top-right {
position: absolute;
right: -1000px;
top: -1000px;
width: 1000px;
height: 1000px;
}
div#container div.container-bottom-right {
position: absolute;
right: -1000px;
bottom: -1000px;
width: 1000px;
height: 1000px;
}
div#container div.container-bottom-left {
position: absolute;
left: -1000px;
bottom: -1000px;
width: 1000px;
height: 1000px;
}
div#container div.container-top-left {
position: absolute;
left: -1000px;
top: -1000px;
width: 1000px;
height: 1000px;
}
Raw
centrar_elemento.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>My project</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link media="screen" type="text/css" rel="stylesheet" href="webtoolkit.clayout.css" />
<style>
body {
margin: 0px;
padding: 0px;
font-family: verdana;
font-size: 12px;
}
div#layout { /* exploder 5.5+ */
width: expression((document.body.clientWidth > 790 ? document.body.clientWidth : 790) + "px");
height: expression((document.body.clientHeight > 490 ? document.body.clientHeight : 490) + "px");
}
div#container,
div#container div.container-top,
div#container div.container-bottom {
width: 790px;
}
div#container,
div#container div.container-right,
div#container div.container-left {
height: 490px;
}
/* colors */
div#container {
background: #FFFFFF;
}
div#container div.container-top {
background: #FF0000;
}
div#container div.container-right {
background: #00FF00;
}
div#container div.container-bottom {
background: #0000FF;
}
div#container div.container-left {
background: #FFFF00;
}
div#container div.container-top-right {
background: #00FFFF;
}
div#container div.container-bottom-right {
background: #FF00FF;
}
div#container div.container-bottom-left {
background: #C0C0C0;
}
div#container div.container-top-left {
background: #000000;
}
</style>
</head>
<body>
<div id="layout">
<div id="container">
<div class="container-top"></div>
<div class="container-right"></div>
<div class="container-bottom"></div>
<div class="container-left"></div>
<div class="container-top-right"></div>
<div class="container-bottom-right"></div>
<div class="container-bottom-left"></div>
<div class="container-top-left"></div>
Content goes here...
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment