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