Under the fixed positioning div centered horizontally

Found knowledge a previously unnoticed, to be a note.

When a parent element block-level elements of the flex open layout, we can easily bring this element centered, can be added to the parent element

Content-The justify: Center; 
align = left-items: Center; / * in a single line centered alignment * /

　or

Content-The justify: Center; 
    align = left-Content: Center; 
    Flex-wrap: wrap; / * centrally aligned in a plurality of rows * /

　However, this is based on the alignment of the parent element flex open layout, assuming that the sub-element is turned on after a fixed positioning, this alignment will fail, because the fixedly positioned out of the document flow, unaffected parent element, parent targeting sub-elements within the element naturally does not work, then the question is: can this fixed centered positioning of the box it?

The method is human imagination.

Here, we can combine css3 percentage and positioning purposes:

{.search_box 
    position: Fixed; 
    Top: 0; 
    left: 50%; 
 -webkit-Transform: the translateX (-50%); 
    Transform: the translateX (-50%); 
    width: 100%; 
    max-width: 540px; 
    min to width: 320px; 
    / * fixedly positioned, from the document stream * / 
    height: 44px; 
    / * by fitting the left, so that the center the div * / 
}

　　The first step: positioning at 50%, then the box is centered in the right position will be, but from a centered position of the screen box, Top: 0;   left: 50%; // to the screen as a reference , the box is positioned to cause movement of the screen half 

 

 

Step 2: Use transform: half a width of the box itself horizontal displacement to the left: translateX (-50%). // to itself as a benchmark , transform the box by moving half their height

 

 This completes the level centered.