文章目录
如何让子元素在父元素中居中
1.子元素为行内元素
text-aligh:center;//水平居中
line-heigt:height;//垂直居中
2.子元素为块级元素
给父元素设置
display:flex;
just-content:center;//垂直居中
align-items:center;//水平居中
给子元素设置:
margin:auto
3.给父元素设置position定位属性,子元素绝对定位
父元素:position:relative
子元素:
position:absolute;
margin:0 auto;
top:0;
botton:0;
left:0;
right:0
4.给父元素设置position定位属性,子元素绝对定位
父元素:position:relative//相对定位
子元素:
position:absolute;//绝对定位
left:50%;
top:50%;
margin-left:-50%;
margin-top:-50%;
5.position & transform: translate(-50%, -50%) 实现块元素百分比居中
.parent {
positioin: relative;
}
.child {
positioin: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);//transfrom形变,transfrom(x,y)x轴y轴移动
}
页面宽高正常显示和页面宽高缩放显示时,都保持,上下左右居中显示
5.1 transform:translate (-50%,-50%) 造成的文字模糊和解决方案
这是因为transform时div的宽度或者高度并不是偶数,移动50%之后,像素点并不是整数,出了小数,和显示像素没有对上。
解决方案是使用flex完成垂直居中,设置排列方向为column,并设置justify-content: center,最后用text-align: center完成水平居中。方能保证文字显示清晰。
优化方法:
1. 将transform: translate(-50%, -50%)改成transform: translate3d(-50%, -50%, 0)
可以解决抖动,但仍然模糊。
2. 将元素的高度设置为偶数可解决;
3. 将transform: translate(-50%, -50%)中的y轴单位改成px也可以解决
4. 改成transform: translate(-50%, -52%)也可以解决
(如果52%不行则从51%每个百分比尝试)
以上方法能较大程度优化问题,但仔细查看仍有细微抖动,最后用了第四种方法。
6.伪元素:before搭配vertical-align:middle实现元素垂直居中
父元素: font-size: 0;
子元素(伪元素):
:before {
vertical-align: middle;
}