盒子居中显示的方法

1. flex布局 给父盒子设置flex

.login-container { width: 100vw; // 屏幕尺寸宽度分成了100等分 height: 100vh; // 屏幕尺寸高度分成了100等分 display: flex; justify-content: center; align-items: center; .form { width: 300px; height: 300px; background-color: pink; /* 居中 */ } }

2.父相子绝 给父盒子设置相对定位，子盒子设置绝对定位 .login-container { width: 100vw; // 屏幕尺寸宽度分成了100等分 height: 100vh; // 屏幕尺寸高度分成了100等分 position: relative;

.form { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);//相对于自己移动 width: 300px; height: 300px; background-color: pink;

} }