Способы центрирования

absolute.css

/*actually (spoiler alert!) absolute centering 
only requires a declared height* 
and these styles:*/
.Center-Container {
  position: relative;
}
.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
/*Advantages:
Cross-browser (including IE8-10)
No special markup, minimal styles
Responsive with percentages and min-/max-
Use one class to center any content
Centered regardless of padding (without box-sizing!)
Blocks can easily be resized
Works great on images

Caveats:
Height must be declared (see Variable Height)
Recommend setting overflow: auto to prevent content spillover (see Overflow)
Doesn't work on Windows Phone*/

/*Модальное окно*/

.Absolute-Center.is-Variable {
display: table; /*Если не задана высота очевидно*/
height: auto;
}

/*Это не всегда работает, но можно проверить Modernizr

Caveats:
This will break cross-browser compatibility. You may want 
to consider an alternate technique if the Modernizr 
test doesn't meet your needs.
• Not compatible with the Resizing technique.
• Firefox/IE8: Using display: table aligns the 
content block to the top, but is still centered horizontally.
• IE9/10: Using display: table aligns the content 
block to the top left.
• Mobile Safari: The content block is centered 
vertically, but becomes slightly off-center 
horizontally when using percentage based widths. Тогда так:
*/

.absolutecentercontent .Absolute-Center.is-Variable {
  display: table;
  height: auto;
}




/*Прибивание по сторонам*/
.Absolute-Center.is-Right {
  left: auto; right: 20px;
  text-align: right;
}

.Absolute-Center.is-Left {
  right: auto; left: 20px;
  text-align: left;
}

absolutecentercontent.js

/* Modernizr Test for Variable Height Content */
Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) {
  Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop);
});

flexbox.md

тут он мог бы быть

###Advantages:

• Content can be any width or height, even overflows gracefully

• Can be used for more advanced layout techniques.

###Caveats:

• No IE8-9 support

• Requires a container or styles on the body

• Requires many vendor prefixes with different syntaxes to work on modern browsers

• Possible performance issues

ib.css

.Center-Container.is-Inline { 
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ 
}

/*
Read more about Transform Centering 
in Chris Coyier’s article "Centering In The Unknown” on CSS-Tricks.
Advantages:
Variable height content
Content overflows by stretching the parent element
Works well cross-browser, and can be adapted for IE7 support (view the CSS to see)
Caveats:
Requires a container
Relies on margin-left: -0.25em; to horizontally center correctly, but may need to be adjusted for different fonts/sizes
Content block's width must be declared to be no wider than 100% of the container minus 0.25em.*/

negative_m.css

.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 */
}

/*Advantages:
Works well cross-browser, including IE6-7
Requires minimal code
Caveats:
Not responsive. Doesn't work for percentage 
based dimensions and can't set min-/max-
Content can overflow the container
Have to compensate for padding or use box-sizing: border-box*/

table-cell.css

.Center-Container.is-Table { 
display: table; 
}
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}
/*
Advantages:
Variable height content
Content overflows by stretching the parent element
Works well cross-browser
Caveats:
Requires extra markup*/

transform.css

.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%);
}
/*Advantages:
Variable height content
Requires minimal code
Caveats:
Won't work in IE8
Need vendor prefixes
Can interfere with other transform effects
Results in blurry rendering of edges and text in some cases*/