[Select] Arrow / caret doesn't scale with theme typography changes

[sarahannnicholson]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Using a Select component with custom theme typography causes arrow / caret to not be vertically centered.

Expected Behavior 🤔

Making changes to the theme's typography should cause components to render proper styles by default. A user of material UI shouldn't need to modify components out of the box when adjusting the theme.

Steps to Reproduce 🕹

https://codesandbox.io/s/busy-feather-uoo3t

Steps:

1. Use theme provider and adjust font size (eg: 18 instead of default theme 14)
2. Add provider to app with your theme adjustment for font size
3. In a child component, use the Select component
4. Notice how the caret for the Select component is not aligned

Context 🔦

Looking into the MUI code, this line appears to be hardcoded to calc(50% - 12px)
https://github.com/mui-org/material-ui/blob/e526be50c6f80d8044470fdefa65da7d2e0561d2/packages/material-ui/src/NativeSelect/NativeSelectInput.js#L91

To center this absolute item, I the formula is: calc( 50% - [half the caret height]). Since the height: 1em which is proportional to fontSize, a potential fix would be: calc(50% - .5em)

Your Environment 🌎

`npx @material-ui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @material-ui/envinfo` goes here.

[siriwatknp]

@sarahannnicholson would you like to create a PR, your solution looks good to me.