css水平垂直居中的方法
水平居中
1.行内元素水平居中的方法。可以通过给他设置text-align:center(给父盒子)
2.块级元素设置水平居中:margin:0 auto(前提是他的父盒子是有宽度的,是根元素也可以)
3.块级元素也可以通过display: inline(转换行内元素),display:inline-block(转换行内块元素) 然后给他们添加text-align:center来实现水平居中
水平垂直居中
水平垂直居中
行内元素水平用text-align:center,垂直居中可以用line-height等于它自身的高度即可
margin与tranlate的区别,margin会影响其他的元素,tranlate自身偏移,不会影响其他的盒子
<div class="outer">
<div class="inner"></div>
</div>
方法1
.outer {
width: 300px;
height: 300px;
background-color: pink;
}
//利用margin实现居中
.inner {
position: absolute;
width: 50px;
height: 50px;
background-color: skyblue;
left: 50%;
top: 50%;
margin-left:25px;
margin-right:25px;
}
方法2
//给父盒子设置相对定位
.outer {
position: relative;
width: 300px;
height: 300px;
background-color: pink;
}
//子盒子设置绝对定位 利用tranlate自身偏移实现居中
.inner {
position: absolute;
width: 50px;
height: 50px;
background-color: skyblue;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
方法3
//给父盒子设置相对定位
.outer {
position: relative;
width: 300px;
height: 300px;
background-color: pink;
}
//子盒子设置绝对定位 利用margin实现居中。
.inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 50px;
height: 50px;
background-color: blue;
margin: auto;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。