css篇 居中方式总结 （水平居中，竖直居中，水平竖直居中）

水平居中

• 前提:1.父元素必须是块级盒子元素 2.父元素的宽度已经被设定好
• 子元素是块级元素且宽度没有设定 ：不存在水平居中一说，因为子元素是块级元素没有设定宽度，那么它会充满整个父级元素的宽度，既水平位置上的宽度和父元素一致
• 子元素是行内元素，子元素的宽度是内容撑开的：text-align:center
• 子元素是块级元素且宽度已经设定

1. 子元素 margin:0 auto
2. 计算父元素的 padding-left 或者 padding-right : （父宽 - 子宽）/ 2 父子元素都设置 box-sizing:border-box
3. 计算子元素的 margib-left 或者 margin-right : （父宽 - 子宽）/ 2 父子元素都设置 box-sizing:border-box
4. 子元素相对与父元素的绝对定位 父相对子绝对：4.1：父：position: relative;子 position:absolute;left:50%;margin-left:（子宽 / 2） 4.2：父：position: relative; 子：position:absolute;left:50%;transform: translateX(-50%)

垂直居中

• 前提 父元素是盒子元素
• 子元素是行内元素，高度是由内容撑开

1. 单行：父元素：line-height:父元素高度
2. 多行：通过给父元素设定display:inline/inline-block/table-cell;vertical-align:middle来解决

• 子元素是块级元素，但子元素的高度未设定

1. 父元素：display: flex;flex-direction: column;

• 子元素是块级元素且高度已经设定

1. 计算子元素的margin-top或margin-bottom ； 给父元素和子元素都设定了box-sizing:border-box ；（父高-子高)/2
2. 计算父元素的padding-top或padding-bottom ；给父元素和子元素都设定了box-sizing:border-box ；（父高-子高)/2

• 利用绝对定位，让子元素相对于父元素绝对定位 （父相子绝）

1. 子元素高度已知：父：position: relative;子：top:50%; margin-top: （-子高一半）
2. 子元素高度未知：父：position: relative; 子: top:50%; transform:translateY(-50%)

垂直水平居中

• 父相子绝：

1. 已知子元素的宽高：父：position: relative; 子：position: absolute;top:50%;left:50%;margin-left:（-子宽一半）;margin-top:(-子高一半)
2. 未知子元素宽高 ：父：position: relative; 子：top:50%; left:50%; transform:translate(-50%, -50%)
3. 已知父子元素的宽高：父：position: relative; 子：position:absolute;top:0;left: 0;right: 0;bottom: 0;margin: auto
4. flex: 父：display: flex;flex-direction: column;justify-content: center;
5. display: table-cell 注：子元素不可是块级元素 :父：display: table-cell;vertical-align: middle;text-align: center;