Блог

Пытаюсь выровнять кнопку по центру. Я также помещу форму в эту область, поэтому мне нужен ящик или контейнер, который находится в середине страницы. Прямо сейчас по какой-то причине, хотя я указал максимальную высоту и ширину 100%, кнопка центрирована, что хорошо, но все еще на самом верху.

Мне, вероятно, нужно как дополнительное поле, также просто действовать как контейнер вокруг материала формы, который находится внутри корневого поля, я полагаю.

Я не уверен, правильно ли я указываю имена свойств alignItems , поскольку это стилизованные объекты, и вы не можете align-items использовать их в качестве опоры, например.

 import React from 'react';
import Button from '@material-ui/core/Button';
import { Box } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
    root: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: '100%',
        height: '100%'
    },
    button: {
        background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
        border: 0,
        borderRadius: 3,
        boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
        color: 'white',
        height: 48,
        padding: '0 30px'
    }
});

function Login() {
    const classes = useStyles();
    return (
        <Box className={classes.root}>
            <Button className={classes.button}>Login</Button>
        </Box>
    );
}

export default Login;
  

Это будет связано с тем, что ваш «корневой» класс находится в компоненте Box, для которого потребуется, чтобы у его родительского элемента была указана высота — в противном случае он не сможет настроить свою собственную высоту на 100% — или, другими словами, элемент имеет высоту 100% — но 100%что?

Попробуйте задать высоту html, body и любых других родительских элементов.

 html, body {
  height: 100%;
  width: 100%;
  overflow: hidden
}
.root {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
    .button {
        background: linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%);
        border: 0;
        border-radius: 3;
        box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3);
        color: white;
        height: 48;
        padding: 0 30px;
    }  

 <Box class="root">
    <Button class="button">Login</Button>
</Box>