经典的css布局有以下几种，下面分别用不同的方法进行实现且进行对比。
一、水平居中
水平居中布局指的是当前元素在父级元素的容器中，水平方向上显示的是居中，有以下几种方式来完成布局：
1、margin:0 auto; text-align:center实现水平居中。
直接给子元素加上margin:0 auto; text-align:center来达到效果，但有一个小问题就是如果子元素里有文本内容，文本内容也会居中;
或者是给父元素加上text-align:center子元素display:inline-block也可以达到以上效果。
2、display:table或者是display:inline-block配合margin来实现
也就是说子元素display:table，margin:0 auto也可以实现水平居中
3、相对定位实现居中
4、绝对定位实现居中，使用绝对定位有一点就是父元素要加上相对定位
5、flex实现水平居中
6、格子布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css实现水平居中</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100%;
height: 100px;
background: beige;
/* position: relative; */
/* display: flex;
flex-direction: column; */
display: flex;
}
.box2 {
width: 100px;
height: 100px;
background: greenyellow;
/* margin:0 auto; 第1种方式来水平居中
text-align: center; */
/* display: table;
margin:0 auto; 第2种方式来水平居中 */
/* position: relative;
left: 50%;
transform: translateX(-50%); 第3种方式来水平居中 */
/* position: absolute;
left:50%;
transform: translateX(-50%); 第4种方式来水平居中 */
/* align-self: center; 第5种方式来水平居中 */
/* margin: auto; 第5种方式来水平居中,和display:flex配合使用 */
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">box2</div>
</div>
</body>
</html>
总结一下实现元素的水平居中布局有以下几点 ：
1、⽂本/⾏内元素/⾏内块级元素 .parent{text-align:center}
2、单个块级元素 .son{width:1000px(定宽)，margin:0 auto}
3、多个块级元素 .parent{text-align:center} .son{display:inline-block}
4、使⽤绝对定位: ⼦绝⽗相，top、right、bottom、left的值是相对于⽗元素尺⼨的，然后margin或者
transform是相对于⾃身尺⼨的，组合使⽤达到⽔平居中的⽬的;
5、任意个元素(flex): .parent{display: flex; justify-content: center; }
6、任意个元素(column):.parent{display:grid;justify-items:center}
二、垂直居中
垂直居中布局指的是当前元素在父级元素容器中，垂直方向是居中显示，有以下几种方式来完成布局：
1、table-cell和vertical-align属性配合使用
给父元素添加display:table-cell;显示的效果等同于表格中的单元格（单元格的内容允许水平或者是垂直方向的对齐设置）
vertical-align:middle;垂直方向上的居中
2、绝对定位和transform属性配合使用
这个要给父级一个相对定位
3、flex实现垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中</title>
<style>
* {
padding:0;
margin: 0;
}
.box1{
width: 100px;
height: 500px;
background-color: rgb(223, 223, 241);
/* display: table-cell;
vertical-align: middle; 第1种方法实现垂直居中 */
/* position: relative; */
/* display: flex;
flex-direction: column;
justify-content: center; 第3种方法实现垂直居中 */
}
.box2{
width: 100px;
height: 100px;
background: greenyellow;
position: absolute;
/* top:50%;
transform: translateY(-50%); 第2种方法实现垂直居中 */
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">box2</div>
</div>
</body>
</html>
总结：
1、⽂本/⾏内元素/⾏内块级元素 .parent{height:150px;line-height:150px;} ⾼度等于⾏⾼的值；
2、多⾏⽂本/⾏内元素/⾏内块级元素 .parent{height:150px;line-height:30px;} ⾏⾼等于height/⾏数
3、图⽚元素: .parent{height:150px;line-height:150px;font-size:0;} .son{vertical-align:middle}
4、单个块级元素:
4.1、使⽤tabel-cell实现: .parent{display:table-cell;vertical-align:middle}
4.2、使⽤position实现: ⼦绝⽗相，top、right、bottom、left的值是相对于⽗元素尺⼨的，然后margin或者transform是相对于⾃身尺⼨的，组合使⽤达到垂直居中
4.3、利⽤flex实现 .parent{display:flex; align-items: center;}
5、任意个元素：.parent{display:flex; align-items: center;} 或 .parent{display:flex;} .son{alignself: center;}或者 .parent{display:flex;flex-direction: column;justify-content: center;}
三、居中布局
居中布局就是既水平居中又垂直居中
1、绝对定位加上transform实现居中布局
要给父级加上相对定位，还有一点问题就是兼容性的问题
要给父级元素加上：position:relative;
子元素加上：position:absolute;top:50%;left:50% ;transform: translate(-50%,-50%);
2、table+margin来实现水平居中，table-cell和vertical-align实现垂直居中
有一点问题就是有可能会影响整体的布局效果没有绝对定位好，而且vertical-align属性有继承性，会导致父元素的文本也是居中的
要给父级元素加上：display:table-cell;vertical-align:middle;
子元素加上：display:table;margin:0 auto;
3、flex来实现水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平垂直居中</title>
<style>
*{
margin:0;
padding:0;
}
.box1{
width: 500px;
height: 500px;
background-color: greenyellow;
/* position: relative; 第1种水平垂直居中方式*/
/* display: table-cell; 第2种水平垂直居中方式
vertical-align: middle;
*/
/* display: flex;
justify-content: center; 第3种水平垂直居中方式 */
}
.box2{
width: 100px;
height: 100px;
background-color: pink;
/* position: absolute; 第1种水平垂直居中方式
top:50%;
left: 50%;
transform: translate(-50%,-50%); */
/* display: table; 第2种水平垂直居中方式
margin: 0 auto; */
/* align-self: center; 第3种水平垂直居中方式 */
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">box2</div>
</div>
</body>
</html>
总结来说：
1、⾏内/⾏内块级/图⽚: 原理：text-align: center; 控制⾏内内容相对于块⽗元素⽔平居中,然后就是line-height和vertical-align的基友关系使其垂直居中，font-size: 0; 是为了消除近似居中的bug；.parent{height:150px;line-height:150px;text-align:center;font-size:0;}.son{vertical-align:middle;}
2、table-cell: CSS Table，使表格内容垂直对⻬⽅式为middle,然后根据是⾏内内容还是块级内容采不同的⽅式达到⽔平居中;
绝对定位: 三种写法-⼦绝⽗相，top、right、bottom、left的值是相对于⽗元素尺⼨的，然后margin或者transform是相对于⾃身尺⼨的，组合使⽤达到⼏何上的⽔平垂直居中；
利⽤flex居中: .parent{display:flex;justify-content:center;align-items:center;}
