水平居中
使用inline-block以及text-align实现。
.container{
text-align: center;
}
.ele{
display: inline-block;
}
AI 代码解读
使用table实现
这种方法可以不定宽居中。
.container{
}
.ele{
display: table;
margin: 0px auto;
}
AI 代码解读
使用margin: 0 auto实现
这种定位方法需要指定witdh。
.container{
}
.ele{
width: 100px;
margin: 0 auto;
}
AI 代码解读
使用flex布局实现
.container{
display: flex;
justify-content: center;
}
AI 代码解读
或者
.container{
display: flex;
}
.ele{
margin: 0px auto;
}
AI 代码解读
绝对定位
.container{
position: relative;
}
.ele{
position: absolute;
left: 50%;
margin-left: -50px;
width: 100px;
height: 100px;
background-color: red;
}
AI 代码解读
或者将元素宽度的一般改成transform: translate(-50%)，这样不定宽的时候也可以实现居中，但是兼容性不是足够好。
.container{
position: relative;
}
.ele{
position: absolute;
left: 50%;
transform: translate(-50%);
width: 100px;
height: 100px;
background-color: red;
}
AI 代码解读
垂直居中
使用vertical-align
.container{
display: table-cell;
vertical-align: middle;
}
AI 代码解读
注意要设置height或者line-height。
或者
.container{
display:inline-block;
vertical-align: middle;
}
AI 代码解读
绝对定位
.container{
height: 500px;
position:relative;
}
.ele{
position: absolute;
top: 50%;
height: 50px;
margin-top: -25px;
}
AI 代码解读
当然height的一半也可以用
transform:translate(0,-50%);
AI 代码解读
来替代。
使用flex布局实现
.container{
display: flex;
align-items: center;
}
AI 代码解读
水平垂直居中
使用flex布局
利用flex布局的justify-content以及align-items修改弹性盒子纵向以及横向的对其位置，使子元素在纵向以及横向位置都以正中位置对其。
.container{
display: flex;
justify-content: center;
align-items: center;
}
AI 代码解读
使用绝对定位
使用绝对定位设置top以及left为50%，然后将宽度以及高度的一半“拉”回来。
.container{
position: relative;
}
.ele{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
AI 代码解读
如果宽度高度指定的时候也可以通过设置负的margin来实现。
.container{
position: relative;
}
.ele{
position: absolute;
top: 50%;
left: 50%;
height: 100px;
width: 100px;
margin-left: -50px;
margin-top: -50px;
}
AI 代码解读
利用vertical-align,text-align,inline-block实现
.container{
display:table-cell;
vertical-align: middle;
text-align: center;
}
.ele{
display: inline-block;
}
AI 代码解读
