Center date in input field with date type

First of all, there is nothing wrong with the text-align: center part, it is working as expected, the problem is that the buttons on the right side of the input (the ones that appear when you hover over the input) need to take up some space as well.

So, you will have to hide those!
You can use the required="required"attribute on your <input> element if you want to remove the "x" button, and these 2 CSS rules to control the arrows and the dropdown (however, do note how the nice date-picker doesn't appear anymore and you have to type down a date using your keyboard when you use the input[type=date]::-webkit-calendar-picker-indicator rule):

.center {
    text-align: center;
    }

input[type=date]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
}



input[type=date]::-webkit-calendar-picker-indicator {
    -webkit-appearance: none;
    display: none;
}

<div>
    <input type='date' class='center' value='2006-01-01' width='100' required="required">
    </div>

See this question if you are interested in more of this.

Or you can just use the JQuery date-picker if you want to.