如下：
<body>
<div class="outer">
<p>盒子</p>
</div>
</body>
方法1：使用绝对定位和margin值实现div模块的水平和垂直居中
<style>
/* 去掉内外边距 */
*{
padding: 0;
margin: 0;
}
body{
background-color: #e84118;
}
/* 用法1 :使用绝对定位和margin值实现div模块的水平和垂直居中*/
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
text-align: center;
/* 这是行内元素水平居中 */
line-height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin: -100px -100px;
/* margin-left:-100px;
margin-top:-100px */
}
</style>
实验结果如下：
方法二：使用绝对定位，top: 50%;left: 50%;transform: translate(-50%,-50%);方法。transform: translate(-50%,-50%);的意思是，往左，上移动自身长宽的50%与方法一，使用margin意思相同。
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
text-align: center;
/* 这是行内元素水平居中 */
line-height: 200px;
position: absolute;
top: 50%;
left: 50%;
/* transform: translate(-50%,-50%);的意思是，往左，上移动自身长宽的50% */
transform: translate(-50%,-50%);
}
方法三：使用绝对定位，margin: auto;和top,left,right,bottom值相等，需要值相等，来实现。
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
text-align: center;
line-height: 200px;
/* 上面的元素不做改变 */
position: absolute;
margin: auto;
top: 10%;
left: 10%;
right: 10%;
bottom: 10%;
}
方法四：使用绝对定位和calc运算。与方法一相似。
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
text-align: center;
line-height: 200px;
/* 上面的元素不做改变 */
position: absolute;
top: calc(50% - 100px);/*calc，获取父级元素的50%，然后减去自身的一般px值，就可以实现*/
left: calc(50% - 100px);
}
方法五：将子元素转换为行内元素，在父级元素中使用line-hight:自身高度;实现垂直居中，在父级元素使用text-align:center;实现水平居中。
<body>
<div class="outer">
<div class="inner">
<p>盒子</p>
</div>
</div>
</body>
<style>
/* 去掉内外边距 */
*{
padding: 0;
margin: 0;
}
body{
background-color: #e84118;
}
/* 用法1 :使用绝对定位和margin值实现div模块的水平和垂直居中*/
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
/* 上面的元素不做改变 */
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
text-align: center;
line-height: 200px;
}
.inner{
width: 100px;
height: 100px;
background-color: pink;
border: 2px solid black;
border-radius: 10px;
text-align: center;
line-height: 100px;
display: inline-block;
}
</style>
结果如下：
方法六：这个方法不常用，但是可以加深对vertical-align的理解。
vertical-align是根据行内元素进行居中或局顶操作的。W3C：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
<body>
<div class="outer">
<div class="inner">
234234
<!-- <p>盒子</p> -->
</div>
<div class="help"></div>
</div>
</body>
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
/* 上面的元素不做改变 */
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
text-align: center;
/* line-height: 200px; */
}
.inner{
width: 100px;
height: 100px;
background-color: pink;
border: 2px solid black;
border-radius: 10px;
text-align: center;
line-height: 100px;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
}
/*由于高度100%将会将原有行的高度撑开，使得行的高度发生改变，进而inner使用vertical-align:middle;的时候生效了。*/
.help{
width: 0;
height: 100%;
display: inline-block;
vertical-align: middle;
}
方法七：flex布局！比较方便，常用。
flex布局，推荐：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
display: flex;
justify-content: center;
align-items: center;在父级元素中写下这三行代码即可。
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
/* 上面的元素不做改变 */
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
display: flex;
justify-content: center;
align-items: center;
}
.inner{
width: 100px;
height: 100px;
background-color: pink;
border: 2px solid black;
border-radius: 10px;
text-align: center;
line-height: 100px;
}
也可以如下：在flex项目中使用margin: 0 auto ;和align-self:center;实现布局。
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
/* 上面的元素不做改变 */
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
display: flex;
}
.inner{
width: 100px;
height: 100px;
background-color: pink;
border: 2px solid black;
border-radius: 10px;
text-align: center;
line-height: 100px;
margin: 0 auto;
align-self: center;
}
方法八：使用grid布局，也比较简便。
grid布局的属性分为两大类，一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。这部分先介绍容器属性。
grid布局，推荐：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
/* 上面的元素不做改变 */
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
display: grid;
}
.inner{
width: 100px;
height: 100px;
background-color: pink;
border: 2px solid black;
border-radius: 10px;
text-align: center;
line-height: 100px;
align-self: center;/*垂直*/
justify-self: center;/*水平*/
}
Talk is cheap,show me the code! ——薪火工作室