版权声明：前端菜鸟--人间草木所有 https://blog.csdn.net/qq_43258252/article/details/84860434
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
/*
一，水平居中
方法1 ：行内元素 （父元素）text-align，（子元素）inline-block
.parent{text-align: center;}
.child{display: inline-block;}
总结：
优点：兼容性好，支持低版本浏览器
缺点：需要同时在父元素和子元素上设置
适用场景：子元素数量少（或只有一个），并且需要兼容低版本浏览器时使用，不受float影响
*/
.parent1 {
background: red;
height: 200px;
text-align: center;
}
.child1 {
background: blue;
display: inline-block;
width: 100px;
height: 100px;
}
/*
一，水平居中
方法2：块状元素 使用margin:0 auto来实现
.child{width:200px;margin:0 auto;}
优点：兼容性好
缺点：需要指定宽度
前提：用于子元素上，不受float影响
*/
.parent2 {
background: red;
height: 200px;
}
.child2 {
background: blue;
width: 100px;
height: 100px;
margin: 0 auto;
}
/*
一，水平居中
方法3：（子元素）display:table;margin:0 auto;
.child{display:table;margin:0 auto;}
优点：只需要对自身进行设置 ，子元素宽高不固定的情况可以使用
缺点：不兼容IE6和IE7
适用场景：子元素数量多，子元素宽高不固定的情况可以使用，不方便修改父元素的属性，对浏览器版本要求相对较低时使用
*/
.parent3 {
background: red;
height: 200px;
}
.child3 {
color: white;
background: blue;
display: table;
margin: 0 auto;
}
/*
一，水平居中
方法4：使用flex实现方法 （父）flex + justify-content
.parent{display:flex;justify-content:center;}
优点：只设parent，子元素宽高不固定的情况可以使用
缺点：flex兼容性差，而且比较耗资源
*/
.parent4 {
background: red;
height: 200px;
display: flex;
justify-content: center;
}
.child4 {
background: blue;
width: 100px;
height: 100px;
}
/*
一，水平居中
方法5：flex+margin
.parent{display:flex;}
.child{margin:0 auto;}
优点：代码简单，子元素宽高不固定的情况可以使用
缺点：污染父元素，flex兼容性问题，如果进行大面积的布局可能会影响效率
*/
.parent5 {
background: red;
height: 200px;
display: flex;
}
.child5 {
background: blue;
width: 100px;
height: 100px;
/* 水平居中 */
margin: 0 auto;
/* 垂直居中 */
/* margin: auto 0; */
/* 水平垂直居中 */
/* margin: auto; */
}
/*
二，垂直居中
方法1 ：单行文本 设置line-height等于父元素高度
.child{ height:20px; line-height:20px}
优点：代码简单
缺点：只适合一行文本，多行文本则不可以
这是一种很流行的方法, 也适应IE7.
*/
.parent6 {
background: red;
height: 200px;
}
.child6 {
background: blue;
height: 100px;
line-height: 100px;
}
/*
二，垂直居中
方法2：块级元素 使用vertical-align的时候，由于对齐的基线是用行高的基线作为标记，故需要设置display:table-cell;
.parent{display:table-cell;vertical-align:middle;height:200px;}
优点：兼容性比较好，换成table可以兼容IE6,7
缺点：table-cell不能和float、position:absolute同时设置。（只能在外parent外套一层div.wrap才能设置float）
*/
.parent7 {
background: red;
height: 200px;
display: table-cell;
vertical-align: middle;
}
.child7 {
background: blue;
width: 500px;
height: 100px;
}
/*
二，垂直居中
方法3：使用flex实现方法 （父）flex + align-items
.parent{display:flex;align-items:center;}
优点：只要设置parent，子元素宽高不固定的情况可以使用
缺点：flex和align-items的兼容性
*/
.parent8 {
background: red;
height: 200px;
display: flex;
align-items: center;
}
.child8 {
background: blue;
width: 500px;
height: 100px;
}
/*
三、【终极需求】水平垂直同时居中！
方法1：元素高度固定
.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;width:固定;height:固定;margin-top:-0.5*高度;margin-left:-0.5*宽度;}
优点：适用于所有浏览器
缺点：需要指定宽高
*/
.parent9 {
background: red;
height: 200px;
position: relative;
}
.child9 {
background: blue;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
}
/*
三、【终极需求】水平垂直同时居中！
方法2：元素高度固定
.parent{position:relative;}
.child{position:absolute;width:固定;height:固定;top:0;left:0;right:0;bottom:0;margin:auto}
优点：适用于所有浏览器
缺点：需要指定宽高
*/
.parent10 {
background: red;
height: 200px;
position: relative;
}
.child10 {
background: blue;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100px;
height: 100px;
margin: auto;
}
/*
三、【终极需求】水平垂直同时居中！
方法3：使用绝对定位
.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
优点：基本只设置子元素，不影响其他元素, 子元素宽高不固定的情况可以使用
缺点：transform兼容性问题
*/
.parent11 {
background: red;
height: 200px;
position: relative;
}
.child11 {
color: white;
background: blue;
/* width: 100px;
height: 100px; */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*
三、【终极需求】水平垂直同时居中！
方法4：利用flex实现
.parent{display:flex;justify-content:center;align-items:center;}
优点：只要设置parent，子元素宽高不固定的情况可以使用
缺点：flex和align-items的兼容性
*/
.parent12 {
background: red;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.child12 {
background: blue;
width: 100px;
height: 100px;
}
/*
三、【终极需求】水平垂直同时居中！
方法5：（父）text-align + table-cell + vertical-align，（子）inline-block（兼容性方案）
.parent{display:table-cell;vertical-align:middle;text-align:center;}
.child{display:inline-block;}
优点：子元素宽高不固定的情况可以使用
缺点：父元素宽高需要指定
*/
.parent13 {
background: red;
width: 1000px;
height: 200px;
display:table-cell;
vertical-align:middle;
text-align:center;
}
.child13 {
color: white;
background: blue;
/* width: 100px;
height: 100px; */
display:inline-block;
}
.parent {
background: red;
height: 200px;
}
.child {
color: white;
background: blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="parent"><div class="child">我是什么都不设置</div></div>
<br />
<div class="parent1"><div class="child1"></div></div>
<br />
<div class="parent2"><div class="child2"></div></div>
<br />
<div class="parent3"><div class="child3">我的宽高不固定</div></div>
<br />
<div class="parent4"><div class="child4"></div></div>
<br />
<div class="parent5"><div class="child5"></div></div>
<br />
<div class="parent6"><p class="child6">单行文本</p></div>
<br />
<div class="parent7"><div class="child7"></div></div>
<br />
<div class="parent8"><div class="child8"></div></div>
<br />
<div class="parent9"><div class="child9"></div></div>
<br />
<div class="parent10"><div class="child10"></div></div>
<br />
<div class="parent11"><div class="child11">我的宽高不固定</div></div>
<br />
<div class="parent12"><div class="child12"></div></div>
<br />
<div class="parent13"><div class="child13">我的宽高不固定</div></div>
<br />
</body>
</html>