HTML+CSS Common horizontal center and vertical centering

Child on behalf of parent element

1: Implemented with Text-align and Inline-block

. Parent{text-align:center;}

. Child{display:inline-block;}

2: Use left and right auto

. child{width:200px;margin:0 Auto;} (You need to set the specified width to be valid)

3:table to implement

. child{display:table;margin:0 Auto;}

4: Use flex layout to implement

. Parent{display:flex;justify-content:center;} Or

. Parent{display:flex;}

. child{margin:0 Auto;}

5: Use absolute positioning to achieve

. parent{position:relative;}

. Child{position:absolute;left:50%;transform:translate (-50%);}

Vertical distribution

1: Using Vertical-align

Vertical-align is also known as the "Inline-block dependency element", meaning that only one element belongs to the inline or inline-block (Table-cell can also be understood as the inline-block level) level, The Vertical-align property on the body will only work.
/* First method */. parent{display:table-cell;vertical-align:middle;height:20px;}

/* The second method */. parent{display:inline-block;vertical-align:middle;line-height:20px;}
2: Use absolute positioning

. parent{position:relative;}

. Child{position:absolute;top:50%;transition:translate (0,-50%);}

3: Using Flex layout

. Parent{display:flex;align-items:center;}

Horizontal Vertical All Center

1: Using Vertical-align,text-align,inline-block to achieve

. Parent{display:table-cell;vertical-align:middle;text-align:center;}

. Child{display:inline-block;}

2: Achieve with absolute positioning

. parent{position:relative;}

. Child{position:absolute;top:50%;left:50%;transform:translate ( -50%,-50%);}

3: Using Flex to achieve

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

Gd_sehun
Links: http://www.imooc.com/article/2235
Source: MU-Class Network

HTML+CSS Common horizontal center and vertical centering