本文主要是介绍[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]中子元素在父元素中居中的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
