一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。
前提:
• 父元素必须是块级盒子容器 • 父元素宽度必须已经被设定好
场景1
- 子元素是块级元素且宽度没有设定
不存在水平居中一说
因为子元素是块级元素。没有设定宽度，那么它会充满整 个父级元素的宽度，即在水平位置上宽度和父元素一致
场景2
- 子元素是行内元素，子元素宽度是由其内容撑开的
子元素是行内元素，子元素宽度是由其内容撑开的
这种情况下解决方案是给父元素设定 text-align:center;
场景3：
- 子元素是块级元素且宽度已经设定
方案一: 给子元素添加margin:0 auto
方案二:
通过计算指定父元素的padding-left或padding-right或margin-left或margin-right。
给父元素和子元素都设定了box-sizing:border-box (父宽-子宽)/
场景3：
- 子元素是块级元素且宽度已经设定
方案三: 通过子元素相对父元素绝对定位
- 父相子绝 • 子： • left:50%; • margin-left: -子宽一半 或 transform:translateX(-50%
- 弹性布局: 父
- display:flex;
- flex-direction: row;
- justify-content:center;
垂直居中总结
场景1：
• 子元素是行内元素，高度是由其内容撑开的 • 单行: 设定父元素的lineheight为其高度来使得子元素垂直居中
• 子元素是行内元素，高度是由其内容撑开的 • 多行: 通过给父元素设定display:inline/inlineblock/table-cell; vertical-align:middle来解
场景1
- 子元素是块级元素且宽度没有设定
不存在水平居中一说
因为子元素是块级元素。没有设定宽度，那么它会充满整 个父级元素的宽度，即在水平位置上宽度和父元素一致
场景2
- 子元素是行内元素，子元素宽度是由其内容撑开的
子元素是行内元素，子元素宽度是由其内容撑开的
这种情况下解决方案是给父元素设定 text-align:center;
场景3：
- 子元素是块级元素且宽度已经设定
方案一: 给子元素添加margin:0 auto
方案二:
通过计算指定父元素的padding-left或padding-right或margin-left或margin-right。
给父元素和子元素都设定了box-sizing:border-box (父宽-子宽)/
场景3：
- 子元素是块级元素且宽度已经设定
方案三: 通过子元素相对父元素绝对定位
- 父相子绝 • 子： • left:50%; • margin-left: -子宽一半 或 transform:translateX(-50%
- 弹性布局: 父
- display:flex;
- flex-direction: row;
- justify-content:center;
垂直居中总结
场景1：
• 子元素是行内元素，高度是由其内容撑开的 • 单行: 设定父元素的lineheight为其高度来使得子元素垂直居中
• 子元素是行内元素，高度是由其内容撑开的 • 多行: 通过给父元素设定display:inline/inlineblock/table-cell; vertical-align:middle来解
