首先这个元素和它的父元素都要设置定位,其中这个要水平垂直居中的元素需设置绝对定位absolute, 然后再给它设置样式{left: 0;right: 0;top: 0;bottom: 0;margin:auto;}。这样便可以实现元素在父容器里垂直居中显示了。
<style type="text/css">
.parent{
/*子元素和父元素宽高随意,都可以实现水平垂直居中,这里随便设置了一个宽高撑开盒子容器体积,方便查看效果*/
width: 600px;
height: 500px;
background: #222222;
position: relative;
}
.child{
width: 150px;
height: 200px;
background: goldenrod;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
同上,设置好定位。然后添加样式{left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%);}便好了。 其中的translateX(-50%)表示将此元素在X轴上向左移50%元素宽度的距离,同理translateY(-50%)将元素在Y轴上向上移50%元素高度的距离。
<style type="text/css">
.parent{
/*子元素和父元素宽高随意,都可以实现水平垂直居中,这里随便设置了一个宽高撑开盒子容器体积,方便查看效果*/
width: 600px;
height: 500px;
background: #222222;
position: relative;
}
.child{
width: 150px;
height: 200px;
background: goldenrod;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
</style>
首先给父元素设置flex布局{display: flex;},然后父元素再设置align-items: center; 可以使其包裹的子元素在水平方向上水平居中排列, 再就是{justify-content: center;}属性规定了子元素在Y轴垂直方向上是居中排列。这样便实现了使用flex完成水平垂直居中的布局。
<style type="text/css">
.parent{
/*子元素和父元素宽高随意,都可以实现水平垂直居中,这里随便设置了一个宽高撑开盒子容器体积,方便查看效果*/
width: 600px;
height: 500px;
background: #222222;
display: flex;
align-items: center;
justify-content: center;
}
.child{
width: 150px;
height: 200px;
background: goldenrod;
}
</style>
END