一个盒子模型在另一个盒子模型内居中

一个盒子模型在另一个盒子模型内居中

html

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

css

.login_container{
  display: flex;
  background-color: #2b4b6b;
  height: 100%;
  justify-content: center;	//主轴上的元素居中排列
  align-items: center;		//元素在辅轴上居中对齐
}

.login_box{
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
}

或者

.login_container{
  background-color: #2b4b6b;
  height: 100%;
}

.login_box{
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  top:50%;					//当top,bottom,left,right为百分比时是相对于其包含块
  left: 50%;
  transform: translate(-50%,-50%);	//translate中的百分比相对于自己
}