[CSS]中子元素在父元素中居中

本文主要是介绍[CSS]中子元素在父元素中居中，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

元素居中

对于当行文字居中，比较简单，设置text-align:center和text-height为盒子高度即可

对于父元素中子元素居中，要实现的话有以下几个方法

方法1：利用定位+margin：auto

<style>.father {width: 500px;height: 300px;border: 1px solid #0a3b98;position: relative;}
​.son {width: 100px;height: 40px;background: #f0a238;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin:auto;}
</style>
<div class="father"><div class="son"></div>
</div>

父元素中relative相对定位，子元素absolute绝对定位，并设置top，left，right，bottom为0，并设置margin:auto

方法2：利用定位+margin：负值

<style>.father {position: relative;width: 200px;height: 200px;background: skyblue;}.son {position: absolute;top: 50%;left: 50%;margin-left:-50px;margin-top:-50px;width: 100px;height: 100px;background: red;}
</style>
<div class="father"><div class="son"></div>
</div>

父元素中relative相对定位，子元素absolute绝对定位，并设置top，left为50%，并设置margin-left和margin-top为盒子大小的一半-50px（这种情况需要知道盒子大小）

方法3：利用定位+transform

<style>.father {position: relative;width: 200px;height: 200px;background: skyblue;}.son {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 100px;height: 100px;background: red;}
</style>
<div class="father"><div class="son"></div>
</div>

父元素中relative相对定位，子元素absolute绝对定位，并设置top，left为50%，并使用transform移动-50%，transform: translate(-50%,-50%); 此方法不需要知道盒子大小

方法4：利用flex

<style>.father {display: flex;justify-content: center;align-items: center;width: 200px;height: 200px;background: skyblue;}.son {width: 100px;height: 100px;background: red;}
</style>
<div class="father"><div class="son"></div>
</div>

使用flex布局，设置justify-content: center; 水平居中 align-items: center;设置垂直居中

这篇关于[CSS]中子元素在父元素中居中的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---