常见居中问题
在编写HTML和CSS时会遇到许多元素水平、垂直居中的问题。这里,总结了一些网上看到的各种各样的解决方案,方便以后查阅,也希望更多的人可以学习。
一、文字水平居中
//适用于文字、链接、inline、inline-block、inline-table和inline-flex的元素。
#outer{
text-align:center;
}
二、块级元素水平居中
#inner{
margin: 0px auto;
}
三、多个块级元素水平居中
1、text-align 和 display
#outer{
text-align:center;
}
#inner{
display:inline-block;
}
2、flexbox实现(默认块级元素)
#outer{
display:flex;
/* 按照主轴中心的位置对齐 */
justify-content:center;
}
四、未知宽高行内块元素(input , img)水平垂直居中
.outerBox{
float: left;
width: 300px;
height: 300px;
background-color: black;
/*核心*/
display: table-cell;
text-align: center;
vertical-align: middle;
}
.innerImg{
width: 100px;
height: 80px;
background-color: white;
}
五、div(块级元素)水平垂直居中
1、需要知道宽高,top,left设为 50% 在用margin拉回宽高的一半。
.outer1{
float: left;
width: 300px;
height: 300px;
background-color: greenyellow;
/*核心*/
position: relative;
}
.inner1{
width: 100px;
height: 80px;
background-color: palevioletred;
/*核心*/
position: absolute;
top: 50%;
left: 50%;
margin: -40px 0 0 -50px;
}
2、未知宽高,绝对定位+margin(好用)
.outer2{
float: left;
width: 300px;
height: 300px;
background-color: plum;
/*核心*/
position: relative;
}
.inner2{
width: 100px;
height: 80px;
background-color: cornflowerblue;
/*核心*/
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
3、未知宽高,transform实现
.outer3{
float: left;
width: 300px;
height: 300px;
background-color: purple;
/*核心*/
position: relative;
}
.inner3{
width: 100px;
height: 80px;
background-color: cornflowerblue;
/*核心*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
}
4、flex布局实现
#container{
display:flex;
/* 按照主轴中心的位置对齐 */
justify-content:center;
/* 交叉轴水平位置对齐 */
align-items: center;
}
总结
transform和flexbox需要考虑兼容问题