Računalniška pomoč ONline

Pogosto želimo vsebino spletne strani postaviti sredinsko po širini in višini. Spodaj rešitev z uporabo CSS. Če želite uporabiti responsive obliko zamenjajte is-Fixed class z is-Responsive.

<div class="Center-Container">
  <div class="Absolute-Center is-Fixed">
  </div>
</div>
 
 
<style>
/*
////////////////////////////////////////
 Absolute Centering
//////////////////////////////////////// 
*/
.Absolute-Center { 
  height: 50%; /* Set your own height: percents, ems, whatever! */
  width: 50%; /* Set your own width: percents, ems, whatever! */
  overflow: auto; /* Recommended in case content is larger than the container */
  margin: auto; /* Center the item vertically & horizontally */
  position: absolute; /* Break it out of the regular flow */
  top: 0; left: 0; bottom: 0; right: 0; /* Set the bounds in which to center it, relative to its parent/container */
  background-color: #000;
}
 
/* //////////////////////////////////////// */
/* Make sure our center blocks stay in their container! */
.Center-Container { position: relative; }
 
/* //////////////////////////////////////// */
/* Fixed floating element within viewport */
.Absolute-Center.is-Fixed { 
  position: fixed;
  z-index: 999;
}
 
/* //////////////////////////////////////// */
/* Min/Max Width */
.Absolute-Center.is-Responsive {
  width: 60%; 
  height: 60%;
  min-width: 200px;
  max-width: 400px;
  padding: 40px;
}
</style>

Vir: http://ctrlq.org/code/19623-absolute-center-css