Cannot center the root

I am not be able to center the root as center of the screen. Here is my code;

{
height: 100%;
display: flex;
justify-content: center;
align-items: center;

}

html {
height: 100%;
}

body {
height: 100%;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, ‘Roboto’, ‘Oxygen’,
‘Ubuntu’, ‘Cantarell’, ‘Fira Sans’, ‘Droid Sans’, ‘Helvetica Neue’,
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

#root {
height: 100%;
}

code {
font-family: source-code-pro, Menlo, Monaco, Consolas, ‘Courier New’,
monospace;
}