如何用CSS将hex-color-picker水平居中？多种设置尝试未果

以下几种方法可以解决你的居中问题：

方法1：使用Flex布局 #

给包含hex-color-picker的.colorpicker容器设置Flex布局，通过justify-content: center实现水平居中：

.colorpicker {
    background-color: gray;
    width: 200px;
    display: flex;
    justify-content: center;
    /* 移除无效的align-self、align-content属性 */
}

方法2：利用margin:auto居中 #

通过深度选择器修改hex-color-picker的样式，让它作为块级元素并自动左右外边距居中：

.colorpicker {
    background-color: gray;
    width: 200px;
}

.colorpicker :deep(hex-color-picker) {
    display: block;
    margin: 0 auto;
}

注：使用:deep()是因为Vue的scoped样式无法直接作用于自定义元素hex-color-picker，深度选择器可以穿透作用域。

方法3：调整元素显示类型配合text-align #

如果希望保留父级的text-align: center，可以将hex-color-picker设置为行内块元素：

.colorpicker {
    text-align: center;
    background-color: gray;
    width: 200px;
}

.colorpicker :deep(hex-color-picker) {
    display: inline-block;
}

为什么之前的设置无效？ #

你之前使用的align-self、align-content是Flex布局专属属性，但父容器未设置display: flex，所以这些属性不会生效；而text-align: center仅对行内/行内块元素生效，若hex-color-picker默认是块级元素，自然无法通过该属性居中。

内容的提问来源于stack exchange，提问作者user16525780