CSS Article 2---How to keep the floating layer horizontally vertically centered

How to keep the floating layer horizontally vertically centered. notehttp://www.cnblogs.com/yaliu/p/5190957.html (i) using absolute positioning and transform　　

　     <div class= "Parent" > <div class= "Children" ></div> </div>　

Position the parent element, as the child element

{ position: absolute; top: 50%; Left: 50%;　　　　-webkit-transform:translate ( -50%,-50%); 　　Background: black; }

(ii) utilization of Flexbox

. Parent { justify-content:Center; align-items:Center;　　display: -webkit-flex; }

(c) When the height of the child element is fixed, the parent element contains other elements other than the center element (the empty label is also a row) or the parent element is not at 0 o'clock to position the parent element, the child element is absolutely positioned, and the margin negative value is half the height of the child element. The code is as follows:

<div class= "parent" > <div class= "Children" ></div> <span></span> </di v>. Parent{Height:400px;//There are other elements other than the positioning element can not be set, if not, you need to position:relative;background:Red; }. Children{width:200px;Height:200px;margin:-100px 0 0-100px;background:Black;position:Absolute;Top:50%; Left:50%; }

　　(d) Use table      table's TD default content to center vertically. Just set the content to center horizontally   (v) display:table-cell      css has a property vertical-align for vertical centering, but only   When the parent element is TD or TH, this vertical-align property will take effect, for other block-level elements, such as  div, p, and so on, by default, the Vertical-align property is not supported. The display type of the block-level element can be set to Table-cell, activating the Vertical-align attribute, but Display:table-cell;　　　　There are compatibility issues, so this approach is not compatible across browsers.　　　　<div class= "Parent" > <div class= "Child" > Haha </div> </div> . parent {width:400px;　　　　height:100px;　　　　Background:black;　　　　Display:table-cell;　　　　Vertical-align:middle;　　Text-align:center;　　　　}. Child {background:red;　　Display:inline-block; Compatibility of} display:table-cell   (vi) Use of positioning and Margin:auto  <div class= "parent" > <div class= "Child" > haha </div> </div>        .parent{                width:600px;                height:400px;               background:red;               Position: relative;         }           .children{               width:200px;               height:200px;                position:absolute;                top:0;                left:0;                bottom:0;                right:0;               margin : auto;               Background:black;          }

CSS 2---How to keep the floating layer horizontally vertically centered