css水平垂直居中各种方法实现方式
原创
不定宽高水平垂直居中？
面试题回答方式：
- 通过display：flex；justify-content:center; align-items:center;就可以让子元素不定宽高水平垂直居中
- 也可以父display：flex；，子设置一个margin：auto；
- 通过css3，给父元素设置相对定位，给子元素设置绝对定位，left：50% top：50% 通过transform：translate(-50%，-50%)拉回自身的宽和高的一半。
- 通过给父元素设置display：table-cell; vertical-align：middle text-align：center 给子元素设置vertical-align：middle text-align：center。就可以让子元素不定宽高水平垂直居中了。
文字在垂直和水平方向重叠的两个属性分别是什么？
垂直方向：line-height。设置成比字体高度还小就可以让两行重叠
水平方向：letter-spacing。设置为负值即可实现重叠。
如何居中div
具体实现方式：
水平居中方法1
给 div 设置一个宽度，然后添加 margin:0 auto; 属性
div{
width: 200px;
margin: 0 auto;
}水平居中方法2
利用 text-align:center 实现
.container{
background: rgba(0, 0, 0, .5);
text-align: center:
font-size: 0;
}
.box{
display: inline-block;
width: 500px;
height: 400px;
background-color: pink;
}让绝对定位的div居中
div{
positionn: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink; /* 方便看效果 */
}水平垂直居中方法1
/* 确定容器的宽高，宽500高300 */
div{
position: absolute;
width:500px;
height: 300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px;
background-color: pink;
}水平垂直居中方法2
/* 未知容器宽高，利用 transform 属性 */
div{
position: absolute;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink;
}水平垂直居中方法3
/* 利用 flex 布局实际使用时应考虑兼容性 */
.container{
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container div{
width: 100px;
height: 100px;
background-color: pink;
}为什么margin: 0 auto会让div居中
margin 可以有4个值，分别对应影响的方向是上，右，下，左， 2个值的时候，对应第一个值是 控制上下距离，第二个值是控制左右， 所以magrgin：0 auto， 就是上下距离为0，auto是自适应，这里指的是左右两个方向的距离一样，也就是说，不论你的宽度怎么变化，都是两个方向距离一样，形成居中。
注意：
要给居中元素一个宽度，否则无效
该元素不可以浮动，否则无效
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读