Skip to content

Instantly share code, notes, and snippets.

@dzNavitski
Created August 11, 2013 07:17
Show Gist options
  • Select an option

  • Save dzNavitski/6203841 to your computer and use it in GitHub Desktop.

Select an option

Save dzNavitski/6203841 to your computer and use it in GitHub Desktop.
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
/****************************************/
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
/**************************************/
.Absolute-Center.is-Fixed {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
z-index: 999;
}
/**************************************/
.Absolute-Center.is-Responsive {
width: 60%;
height: 60%;
min-width: 400px;
max-width: 500px;
padding: 40px;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
/**************************************/
.Absolute-Center.is-Right {
width: 50%;
height: 50%;
margin: auto;
overflow: auto;
position: absolute;
top: 0; left: auto; bottom: 0; right: 20px;
text-align: right;
}
/*************************************/
.Absolute-Center.is-Overflow {
width: 50%;
height: 300px;
max-height: 100%;
margin: auto;
overflow: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
/**************** IMAGE **************/
.Absolute-Center.is-Image {
width: 50%;
height: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
/************************************/
.Absolute-Center.is-Variable {
display: table;
width: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
/*************************************/
.is-Negative {
width: 300px;
height: 200px;
padding: 20px;
position: absolute;
top: 50%; left: 50%;
margin-left: -170px; /* (width + padding)/2 */
margin-top: -120px; /* (height + padding)/2 */
}
/*************************************/
.is-Transformed {
width: 50%;
margin: auto;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
/****************************************/
<div class="Pos-Container is-Table">
<div class="Table-Cell">
<div class="Center-Block">
<!-- CONTENT -->
</div>
</div>
</div>
.Pos-Container.is-Table { display: table; }
.is-Table .Table-Cell {
display: table-cell;
vertical-align: middle;
}
.is-Table .Center-Block {
width: 50%;
margin: 0 auto;
}
/***********************************/
.Pos-Container.is-Flexbox {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment