Skip to content

Instantly share code, notes, and snippets.

@arroz
Created June 13, 2013 22:22
Show Gist options
  • Save arroz/5777897 to your computer and use it in GitHub Desktop.
Save arroz/5777897 to your computer and use it in GitHub Desktop.
centering with absolute position
/**
* centering with absolute position
*/
.inside {
display: inline-block;
background: red;
margin: auto auto;
text-align: left;
}
.container {
text-align: center;
margin: auto auto;
width: 90%;
background: green;
overflow: auto;
height: 100%;
}
.outside {
background-color: blue;
position: relative;
position: fixed;
top:50px;
bottom:50px;
left: 0;
right: 0;
/*height: 100%;*/
}
<div class="outside">
<div class="container">
<div class="inside"><p>porra para estes gajos</p><p>porra para estes</p><p>porra para estes gajos</p><p>porra para estes gajos porra</p><p>porra para estes gajos</p>
<p>porra para estes</p><p>porra para estes gajos</p><p>porra para estes gajos porra</p><p>porra para estes gajos</p><p>porra para estes</p><p>porra para estes gajos</p>
<p>porra para estes gajos porra</p><p>porra para estes gajos</p><p>porra para estes</p><p>porra para estes gajos</p><p>porra para estes gajos porra</p><p>porra para estes gajos</p>
<p>porra para estes</p><p>porra para estes gajos</p><p>porra para estes gajos porra</p><p>porra para estes gajos</p>
<p>porra para estes</p><p>porra para estes gajos</p><p>porra para estes gajos porra</p><p>porra para estes gajos</p><p>porra para estes</p><p>porra para estes gajos</p>
<p>porra para estes gajos porra</p><p>porra para estes gajos</p><p>porra para estes</p><p>porra para estes gajos</p><p>porra para estes gajos porra</p></div>
</div>
</div>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment