Material-ui网格对齐，未垂直居中

Question

我想问你一个关于用户界面对齐的问题。 我在material-ui中遵循了该示例。
a link！

但是，由于应用了该示例，因此我没有对其进行垂直处理。 如果您能给我解决方案，我将不胜感激。
这是我的代码和结果

我想看到黑色的结果。

class NavComponent extends React.Component {

    render() {
        const navborder = {
            border: "1px solid black",
            height: "100px"
        }
        const tempStyle = {
            marginLeft: "50px",
        }
        const temp2Style = {
            marginRight: "55px",
            background: "purple",
            color: "white"
        }
        return (
            <div style={navborder}>
                <Grid container>
                    <Grid item xs={6}>
                        <Grid container
                            direction="row"
                            justify="flex-start"
                            alignItems="center"
                        >
                            <img style={tempStyle} src="slacklogo.png" alt="logo" />
                        </Grid>
                    </Grid>
                    <Grid item xs={6} >
                        <Grid container
                            direction="row"
                            justify="flex-end"
                            alignItems="center"
                        >
                            <div>
                                Sign in
                            </div>
                            <Button style={temp2Style} color="secondary" >
                                Get Start
                            </Button>
                        </Grid>
                    </Grid>
                </Grid>
            </div>
        )
    }
}
export default NavComponent