css排列居中 |jquery点击切换css

一、水平居中

.container {
text-align: center;
/*设置文字内容居中*/ 
}
.box {
display: inline-block;
/*让盒子变成行内盒子*/ 
}

在这段代码中，首先大家需要在父级元素中设置text-align属性为center，这样就可以让子元素在水平方向上居中。接下来大家给子元素添加display: inline-block属性，这样这个元素就变成了行内盒子，这样就能实现水平方向上的居中对齐。

二、垂直居中

.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.box {
width: 200px;
height: 200px;
}

在这段代码中，大家将父级元素设置为flex布局，通过设置justify-content属性来让子元素在横向上居中对齐。而在垂直方向上，大家使用align-items属性来将子元素在垂直方向上居中对齐。同时为了让父级元素的高度占据整个页面，大家设置height属性为100vh，这样子元素就可以在垂直方向上绝对居中了。

三、水平垂直居中

.container {
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

在这段代码中，大家先将父级元素设置为position: relative，这样大家可以将子元素进行绝对定位。接下来大家在子元素中设置top属性为50%，让它在垂直方向上上下居中对齐。而对于水平方向上对齐，大家设置left属性为50%。接着大家通过transform属性来对子元素进行偏移，让它水平方向上往左偏移50%，垂直方向上向上偏移50%。这样就可以实现水平垂直方向上的居中对齐了。

以上就是CSS中常用的三种排列居中方法。掌握这些技巧，您就能实现各种排列居中需求了。祝您工作顺利！