一、文本水平垂直居中
二、盒子水平垂直居中
1.外边距
2.定位
3.平移
4.弹性盒子（简单、快速、常用、推荐）
分割线----------------------------------------------
一、文本水平垂直居中
line-height = height 文本垂直居中
text-align:center 文本水平居中显示效果
<style>
.box1{
/* 元素左浮动 */
float: left;
width: 200px;
height: 200px;
background-color: red;
color: #fff;
}
.box2{
/* 元素左浮动 */
float: left;
width: 200px;
height: 200px;
background-color: green;
color: #fff;
/* 设置元素外边距 */
margin-left: 20px;
/*文本垂直居中*/
line-height: 200px;
/* 文本水平居中 */
text-align: center;
}
</style>
</head>
<body>
<div class="box1">文本原来位置</div>
<div class="box2">文本水平垂直居中</div>
</body>二、盒子水平垂直居中
1.盒子在浏览器中水平居中（很多网页布局都会使用的遮罩）
margin: 0 auto;效果显示
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
color: #fff;
/* 上下外边距为0，左右外边距为自适应 */
/* margin: 0 auto; */
/* 简写 */
margin: auto;
}
</style>
</head>
<body>
<div class="box">盒子水平居中</div>
</body>2.盒子在父级盒子中水平居中对齐（margin）
水平方向：auto 自适应
垂直方向：（父级元素高度/2)-（子元素/2）
存在问题：高度塌陷
父级元素会跟着子元素margin向下移动
解决问题：
给父级元素添加 overflow:hidden; 显示效果
<style>
.outer{
width: 400px;
height: 400px;
background-color: red;
/* 解决高度塌陷问题 */
overflow: hidden;
}
.inner{
width: 100px;
height: 100px;
background-color: green;
/*
子元素水平垂直居中
*/
margin: 150px auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>3.盒子在父级盒子中水平居中对齐（定位position）
使用定位让盒子水平垂直居中
1.给盒子设置定位
2.设置盒子的top、left（或bottom、right）偏移量为
top:50%
left:50%
3.设置盒子的外边距
margin-top:-(盒子高度/2)
margin-left:-(盒子宽度/2)显示效果
<style>
.outer{
/* 父级元素相对定位 子绝父相 */
position: relative;
width: 300px;
height: 300px;
background-color:pink;
}
.inner{
/* 子元素绝对定位 */
position: absolute;
width: 100px;
height: 100px;
background-color: green;
/* 水平垂直居中 */
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>4.盒子在父级盒子中水平居中对齐（转换transform）
配合定位使用：
1.给盒子添加定位
2.设置盒子的top、left偏移量（同上）
3.设置盒子在水平垂直方向的平移(相对于自身进行平移)
transform: translate(-50%,-50%) 显示效果
同上
<style>
.outer{
/* 父级元素相对定位 子绝父相 */
position: relative;
width: 300px;
height: 300px;
background-color:pink;
}
.inner{
/* 子元素绝对定位 */
position: absolute;
width: 100px;
height: 100px;
background-color: green;
/* 水平垂直居中 */
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>后面还学了一个方法，补充一下。
4.盒子在父级盒子中水平居中对齐（弹性盒子）（推荐）
1.使用display:flex将父级盒子转换为弹性盒子
2.使用弹性盒子的属性
justify-content: center;
align-items: center;效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent{
width: 500px;
height: 500px;
background-color: green;
/* 将父级盒子设为弹性盒子 */
display: flex;
justify-content: center;
align-items: center;
}
.son{
width: 200px;
height: 200px;
background-color: brown;
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
</html>直接轻松实现盒子的垂直水平居中
以上是自己的总结，请大佬们指点