Center Alignment Using CSS

First, write a simple html code and set a div object named parentDiv. The html code is as follows:

1.1 achieve horizontal text Center (UseText-align)

Set text-align: center; for div. parentDiv. The CSS code is as follows:

   { :; :; :; :;   }

　　Sometimes, you will find that even if you use the text-align: center; attribute, it still does not play the center role. The reason is that the div tag does not define its own center attribute, and this is a very unscientific method for layout. The correct setting method is to add the following attributes to. parentDiv:Margin-left: auto;AndMargin-right: auto;You can. For details, refer to 2.1.

Note:Define text-align: center in the parent element. The attribute means that the content in the parent element is centered. for IE browser, this setting is okay, but not in the Mozilla Browser. The solution is to add margin-left: auto; and margin-right: auto when the sub-element is defined. It should be noted that if you want to use this method to center the entire page, it is recommended that you do not set it in one div. You can split multiple divs in sequence, define margin-left: auto; and margin-right: auto in each split div.

1.2 vertical center of a single line of text (UseLine-height)

The vertical-align attribute cannot be used in vertical center of the text in the layer. Therefore, a clever method is to set the height to the same as the line-height. The CSS code is as follows:

   { :; :; :; :;  :;  }

1.3 text vertical center (UseVertical-align)

Vertical-align can be used for vertical center, but vertical-align is only applicable to inline and table-cell elements, so conversion is required before.

   { :; :; :; :;  :;  :;   }

1.4 vertically center the image (using background-position)

The background method is used to use the background-position attribute in the div. parentDiv object. The CSS code is as follows:

   { :; }

Note: The key lies in the final center. This parameter defines the image position. Of course, the background-position attribute can also be written as "top left" or "bottom right", or a value can be written directly.

2. div Center

First, write a simple html code, set a parent div class named parentDiv, and then set a child div class named childDiv. The html code is as follows:

Implements the background color and border size of the box width and height of parentDiv and childDiv Parent and Child div. The CSS code is as follows:

    { :;  :;  :; }    { :; :; :; :; }   { :; :; :; }

2.1 horizontal center (UseMargin: auto)

When the div. childDiv object has a fixed width, set the horizontal direction margin to auto to realize horizontal center. The CSS code is as follows:

    { :; }

2.2 implement horizontal center (use text-align: center)

If you give the sub-box div. if you set display: inline-block for childDiv without affecting the overall layout, you can convert the sub-box into inline-block, and set text-align: center for the parent box to align in the center. The CSS code is as follows:

       { :; }  { :; }

2.3 centered table-cell elements

Set the parent box as a table-cell element. You can use text-align: center; and vertical-align: middle; to center horizontally and vertically. A better solution is to simulate the Parent-Child structure using a three-tier structure. The html code is as follows:

               tableCell      

The CSS code is as follows:

         { :; }  { :; :; :; }  { :; }

2.4 absolute center positioning (offset using margin)

Set the parentDiv object to a positioning element (using the position: relative; Attribute) and set the childDiv object to an absolute position. Both left and top are 50%. Then, the upper left corner of the sub-box is centered and aligned, offset using margin. The CSS code is as follows:

    { :; }  { :; :; :; :;  :; }

2.5 absolute center positioning (offset using transform)

The absolute positioning method is similar to 2.4, except that the offset is implemented using the translate in the transform. The CSS code is as follows:

    { :; }  { :; :; :; :; :; :; :; :; }

2.6 absolute center positioning (offset using margin: auto)

In the same way, the sub-boxes are absolutely located. Here, top, right, bottom, and left are both 0, and margin is used for auto offset. The CSS code is as follows:

    { :; }  { :; :;  :; :; :; :; }

2.7 Flexbox Center

Center using the flexible box model (flexbox. CSS code:

    { :;  :;  :;  :;  :;  :; :; :; :; :; :; :; :; :; :; }