Cannot align center with css

It should be a VERY simple thing to do.
But somehow I managed to not accomplish!

How can I align the hex-color-picker to center horizontally?

<template>
    <div :onSelected="onSelected" :color="color" class="colorpickerBase">
        <div class="colorpicker">
            <hex-color-picker :color="color" @color-changed="handleColorChanged"></hex-color-picker>
        </div>
        <output>{{color}}</output>
    </div>
</template>

<script setup lang="ts">
import {ref} from "vue"
import 'vanilla-colorful';

const props = defineProps({
  onSelected : {
    type : Function,
  },
  color : {
    type : String,
  }
})

const color = ref(props.color)

function handleColorChanged(event) {
    color.value = event.target.color;
    console.log("handleColorChanged",event.target.color,props.onSelected)
    props.onSelected(color.value)
}
</script>

<style scoped>
    output {
        display: block;
        margin-top: 10px;
        font-size: 1.25rem;
        text-align: center;
    }
    .colorpicker {
        text-align: center;
        background-color: gray;
        width: 200px;
        align-self: center;
        align-content: center;
    }
    .colorpickerBase {
        text-align: center;
        background-color: white; 
        padding: 20px;
        margin: 20px;
    }
</style>

Tried to set every parameter to center, but still this code does not align hex-color-picker to the center.. Setting align-self etc.. doesn’t even move anything.

How can I do that??

>Solution :

Your .colorpicker class is using align-self and align-content rules which require the child to be within an element with display: flex.
The text-align used is for text or elements with display: inline

    .colorpicker {
        align-self: center; 
        align-content: center;
    }

For this simple align problem I’d suggest using something like margin: auto

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