让一个div在网页始终保持上下左右居中

让一个div在网页中始终保持上下左右居中的方法

1、div的宽高不随视窗改变而改变的写法：

第一步：创建一个div；
第二步：给div添加样式 ，如下：
.box{
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: red;
}
或者是这样：
.box{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
background-color: red;
}

2、div宽高随视窗变化而变化的写法：

第一步：创建一个div；
第二步：给div添加样式 ，如下：（只需要把宽高改成百分比写法就好）
.box{
width: 20%;
height: 20%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: red;
}

3、弹性盒子写法

ps：这种写法只能用一个div来包裹要居中的div，规定父级div的样式，从而达到子div上下左右保持居中的效果。
第一步：创建两个div，如下：

第二步：分别给两个div添加样式，如下：

.box{ //父级div样式
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: red;
display: flex;
align-items: center;
justify-content: center;
}

.subBox{  //子div样式
    width: 100px;
    height: 100px;
    background-color: yellow;
}

这样就能保证子div在父级div中保持上下左右居中

/*
author:Amos
date：2019/11/22 18:50
*/