首页 > 代码库 > 元素居中
元素居中
一、行内元素水平居中
text-align: center;
二、行内元素垂直居中
height: 40px;line-height: 40px; 让这两个值相等
三、块级元素水平居中
width: 300px; margin: 0 auto; 可以不设置高度
三、块级元素垂直居中
1.固定宽高块级元素垂直居中
div{ width: 200px;
height: 100px;
line-height: 100px;
border: 1px solid #000;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -50px;
}
2.宽高是百分比的块级元素垂直居中
div{
width: 10%;
height: 30%;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
3.宽高不固定的块级元素垂直居中
div{
transform: translate(-50%,-50%);/*此时的百分数是以自身的宽高为参考*/
/*width: 1500px;
height: 300px;*/
/*width: 300px;*/
width: 30%;
height: auto;
元素居中
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。