子元素水平垂直居中的多种实现方法
本帖最后由 马黑黑 于 2022-4-26 07:41 编辑设有两个父子元素，现要求令子元素在父元素内水平、垂直两个方向都能居中，怎么实现？
方法一：使用Flex弹性布局的justify-content和align-items属性
<style type="text/css">
.out-box1 {
width: 150px;
height: 150px;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
border: 1px solid;
}
.inner-box1 {
width: 100px;
height: 100px;
background: #333;
}
</style>
<div class="out-box1">
<div class="inner-box1"></div>
</div>
此法，父子元素无position定位也不影响子元素居中。
方法二：父元素设display为inline-block并设定padding值
.out-box2 {
display: inline-block;
padding: 25px;
border: 1px solid;
}
.inner-box2 {
width: 100px;
height: 100px;
background: olive;
}
<div class="out-box2">
<div class="inner-box2"></div>
</div>
此法不设置父元素宽高，其宽高将由自己的padding + 子元素的宽高决定。此法可变通，如设置子元素的margin值也能达到目的。
方法三：子元素margin auto + 上下左右0
.out-box3 {
position: relative;
width: 150px;
height: 150px;
border: 1px solid;
}
.inner-box3 {
position: absolute;
width: 100px;
height: 100px;
margin: auto;
left:0;
top: 0;
right: 0;
bottom: 0;
background: olive;
}
此法，要求父元素position设为 relative、子元素absolute，子元素的left、top、right、bottom都设为0，并将margin设为auto即可。
方法四：用transform之translate腾挪大法
.out-box4 {
width: 150px;
height: 150px;
border: 1px solid;
}
.inner-box4 {
width: 100px;
height: 100px;
transform: translate(25px,25px);
background: olive;
}
<div class="out-box4">
<div class="inner-box4">4</div>
</div>
此法代码量极少，重点在于根据父子元素的尺寸计算偏移量。例中，父元素宽高均大于子元素50个像素，按初始位置，子元素左边、上边与父元素左边、上边相切，xy两个方向各挪动25像素便可居中。计算公式为（以宽度为例）：(父元素宽度-子元素宽度)/2
方法五：定位大法
.out-box5 {
width: 150px;
height: 150px;
border: 1px solid;
}
.inner-box5 {
position: relative;
width: 100px;
height: 100px;
left: 25px;
top: 25px;
background: olive;
}
<div class="out-box5">
<div class="inner-box5">5</div>
</div>
此法至少要求子元素拥有position属性，如果父元素没有position属性设置，则子元素的position值只能是relative，若父元素有position设定，则子元素设position为relative或absolute均可。建议父子元素都有relative或absolute定位。
方法五的左右（left和top）的计算方法同方法四。当存在某一盒子尺寸可能不能确定时，可考虑使用CSS的calc函数实现动态定位。例如，假设我们不知道父元素的宽高，则：
left: calc(50% - 25px);
top: calc(50% - 25px);
扩展知识：
① 【line-height】当一个元素设定了 line-height 值与 width 值相等，则针对单行文本，文本垂直居中；
② 【text-align: center】文本整体水平居中
③ 【display: table-cell】赋予元素表格属性，元素拥有表格的一些特性
黑黑能总结出这么多子元素定位的语句，太厉害了{:4_199:} 原来不用position也能进行定位，而且不需要算数据，居中更准确{:4_187:} 学习学习再学习{:4_199:} 红影 发表于 2022-4-26 10:17
黑黑能总结出这么多子元素定位的语句，太厉害了
可能还有其他的方法，我就想到这么多了 红影 发表于 2022-4-26 10:18
原来不用position也能进行定位，而且不需要算数据，居中更准确
但要看使用场景，不同的场景做不同的设置，总之，宗旨是选择更合适的方法 好厉害，这个得好好地学习了。{:4_199:} 加林森 发表于 2022-4-26 18:00
好厉害，这个得好好地学习了。
嗯，要一一消化 马黑黑 发表于 2022-4-26 18:41
嗯，要一一消化
我去新编辑器里面看了，方方正正的，挺好看的。 加林森 发表于 2022-4-26 19:12
我去新编辑器里面看了，方方正正的，挺好看的。
好看是次要的{:5_117:} 马黑黑 发表于 2022-4-26 19:16
好看是次要的
主要是看父子关系的。 加林森 发表于 2022-4-26 20:02
主要是看父子关系的。
对，还有定位 马黑黑 发表于 2022-4-26 21:17
对，还有定位
嗯嗯，这个明白的。 加林森 发表于 2022-4-26 21:21
嗯嗯，这个明白的。
主要演示的是居中定位 马黑黑 发表于 2022-4-26 21:22
主要演示的是居中定位
就是，我发现了这个。挺好的。 马黑黑 发表于 2022-4-26 12:15
可能还有其他的方法，我就想到这么多了
这些已经很多了呢，都没想到原来有这么多的。 马黑黑 发表于 2022-4-26 12:16
但要看使用场景，不同的场景做不同的设置，总之，宗旨是选择更合适的方法
我只习惯之前的绝对定位和相对定位{:4_173:} 红影 发表于 2022-4-26 22:33
我只习惯之前的绝对定位和相对定位
那是定元素到什么位置，这里说的是两个方向的居中 红影 发表于 2022-4-26 22:31
这些已经很多了呢，都没想到原来有这么多的。
做过整站程序的开发，在CSS方面下了点功夫 马黑黑 发表于 2022-4-26 22:44
那是定元素到什么位置，这里说的是两个方向的居中
嗯，定位和居中还是有点不同的。