CSS块元素水平居中是前端开发中经常会用到的一项技术。水平居中主要是用于将块元素的内容在它所在的容器内部居中显示。

在CSS中，水平居中可以有多种实现方式。下面以div元素为例，介绍其中几种典型的方式。

//1. margin属性实现水平居中
div{
margin: 0 auto;
}

使用margin属性将左右margin都设置为auto，即可使div元素水平居中。需要注意的是，此方法仅适用于宽度已知的元素，因为auto值只能在已知的宽度上起到作用。

//2. display属性实现水平居中
.div-wrapper{
display: flex;
justify-content:center;
}

将包含div元素的容器设置为flex布局，再使用justify-content属性将内容居中即可实现水平居中。需要注意的是，此方法适用于div元素宽度未知的情况。

//3. position属性实现水平居中
.div-wrapper{
position: relative;
}
div{
position: absolute;
left: 50%;
transform: translateX(-50%);
}

使用position属性将包含div元素的容器和div元素都设置为绝对定位，并将left属性设为50%，再使用transform属性将div元素在水平方向上偏移自身宽度一半的距离即可实现水平居中。需要注意的是，此方法适用于div元素未知宽度的情况。

以上是几种常见的CSS块元素水平居中的实现方式。根据实际情况选择最适合自己的方法，可以使页面更加美观、舒适。