css元素居中方法
几种居中方式,分情况使用:
1.已知父盒子宽度,子盒子宽度;
div{
transform: translate(-50%,-50%);
//margin-left: - 自身宽度一半;
position: absolute;
left: 50%;
top: 50%;
}
2.div标签下img标签参考span元素;
img{
vertical-align: middle;
}
span{
display: inline-block;
height: 100%;
vertical-align: middle;
}
div:after{
content: "";
display: inline-block;
height: 100%;
vertical-align:middle;
}
3.利用表格table;div下的span
div{
display:table;
}
span{
text-align:center;
vertical-align: middle;
display: table-cell;
}
4.流式布局居中,div下的span;
div{
display:flex;
}
span{
margin: auto;
}
5.div包含ul,ul宽度不确定,li宽度不确定,个数不确定;
.slideBox .hd {
position: relative;
*text-align: center;
margin-top: -20px;
z-index: 23;
}
.slideBox .hd ul {
display:table;
margin-left:auto;
margin-right:auto;
margin-top: -50px;
margin-bottom: 20px;
}
.slideBox .hd ul li {
width: 143px;
height: 32px;
margin-right: 10px;
cursor: pointer;
background-color: rgba(255, 255, 255, .5);
border-radius: 4px;
/* ================= */
float:left;
*float:none;
*display:inline;
*zoom:1;
z-index: 20;
}
示例效果如下: