css设置div或盒子居中，垂直居中，左右居中

类型一：固定宽度高度

1. html代码

 <div class="login_container"><div class="login_box"><div>内容</div></div></div>

2 css

// 外部一级div
.login_container {background-color: darkgrey;height: 100%;
}
// 二级div
.login_box {height: 300px;width: 450px;background-color: #fff;border-radius: 3px;position: absolute; // 绝对定位top: 50%;left: 50%;transform: translate(-50%, -50%); // 横轴-50%，竖轴-50%
}

效果图：

类型二：宽度高度不固定值

1. html代码

 <div class="login_container"><div class="login_box"><div>内容</div></div></div>

2 css

// 外部一级div
.login_container {background-color: darkgrey;height: 100%;
}
// 二级div
.login_box {height: 300px;width: 450px;background-color: #fff;border-radius: 3px;position: absolute; // 绝对定位top: 50%;left: 50%;transform: translate(-50%, -50%); // 横轴-50%，竖轴-50%
}

效果图：