Why is the element not centered in Jetpack Compose?

Question

Android

Column(verticalArrangement = Arrangement.Center, 
                        horizontalAlignment = Alignment.CenterHorizontally) {
                    //size(height = (LocalConfiguration.current.screenHeightDp / 2).dp,
                    //width = (LocalConfiguration.current.screenWidthDp / 2).dp)

                    SelectableItem(selected = selected, title =
                    "hello") {
                           selected = !selected

                    }
                    }

@Composable
fun SelectableItem(
    modifier: Modifier = Modifier,
    selected : Boolean,
    title : String,
    titleColor: Color =
        if (selected) MaterialTheme.colors.primary
        else MaterialTheme.colors.onSurface.copy(alpha = 0.2f),
    titleSize : TextUnit = MaterialTheme.typography.h6.fontSize,
    titleWeight : FontWeight = FontWeight.Medium,
    subtitle : String? = null,
    subtitleColor : Color =
        if (selected) MaterialTheme.colors.primary
        else MaterialTheme.colors.onSurface.copy(alpha = 0.2f),
    borderWidth : Dp = 1.dp,
    borderShape : Shape = RoundedCornerShape(10.dp),
    borderColor : Color =
        if (selected) MaterialTheme.colors.primary
        else MaterialTheme.colors.onSurface.copy(alpha = 0.2f),
    rectColor : Color =
        if (selected) MaterialTheme.colors.primary
        else MaterialTheme.colors.onSurface.copy(alpha = 0.2f),
    icon : ImageVector = Icons.Default.Add,
    iconColor : Color = if (selected) MaterialTheme.colors.primary
    else MaterialTheme.colors.onSurface.copy(alpha = 0.2f),
    onClick : () -> Unit
){
    val scaleA = remember { androidx.compose.animation.core.Animatable(1f) }
    val scaleB = remember { androidx.compose.animation.core.Animatable(1f) }
    LaunchedEffect(key1 =selected, block ={
        if (selected){
            launch{
                scaleA.animateTo(targetValue = 0.3f, animationSpec = tween(durationMillis = 300))
                scaleA.animateTo(targetValue = 1f, animationSpec = spring(
                    dampingRatio = Spring.DampingRatioLowBouncy,
                    stiffness = Spring.StiffnessLow
                ))

            }
            launch{
                scaleB.animateTo(targetValue = 0.3f, animationSpec = tween(durationMillis = 300))
                scaleB.animateTo(targetValue = 1f, animationSpec = spring(
                    dampingRatio = Spring.DampingRatioLowBouncy,
                    stiffness = Spring.StiffnessLow
                ))

            }
        }
    })
    Column(modifier = modifier
        .size(width = (LocalConfiguration.current.screenWidthDp / 2).dp,
        height = (LocalConfiguration.current.screenHeightDp/2).dp)
        .scale(scaleB.value)
        .border(
            width = borderWidth,
            color = borderColor,
            shape = borderShape
        )
        .clip(borderShape)
        .padding(start = 12.dp)
        .clickable {
            onClick
        },
    verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally) {
            Text(modifier = Modifier.weight(8f),
                text = title,
                style = TextStyle(
                    color = titleColor,
                    fontSize = titleSize,
                    fontWeight = titleWeight
                ),
                maxLines = 1,
                overflow = TextOverflow.Ellipsis,
            )
            IconButton(modifier = Modifier
                .scale(scaleA.value)
                .weight(16f),
                //.size(250.dp, 250.dp),
                onClick = onClick) {
                Icon(modifier = Modifier.size(250.dp, 250.dp),
                    imageVector = icon, contentDescription = "tap to create food",
                tint = iconColor)
            }

    }
}