css标签设置居中 |商品列表 css

/* 居中的常用样式 */
/* 水平居中 */
.center {
margin: 0 auto;
}
/* 垂直居中 */
.center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
/* 水平垂直居中 */
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

首先是水平居中，大家采用margin属性进行设置，该属性有四个值，分别代表上、右、下、左四个方向的外边距，大家将左右边距设置为auto，即可实现水平居中。

垂直居中的实现则需要将元素的position属性设置为relative，然后利用top和transform属性将元素上移50%的高度，再通过transform的负值将元素垂直居中。

而对于水平垂直居中，则需要将元素的position属性设置为absolute，再利用top、left和transform属性将元素定位在页面的中央。

总之，页面的居中布局是CSS设计中的一个关键问题，以上列举了常用的三种实现方式，大家可以根据自己的需求进行设置。