代码如下:
<!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>
*{
margin: 10px;
font-size: 16px;
}
/* 方法一: table表格法*/
/* 思路:显示设置父元素为:table,子元素为:cell-table,vertical-align: center
优点:父元素(parent)可以动态的改变高度(table元素的特性)
缺点:IE8以下不支持*/
.parent1{
display: table;
height:300px;
width: 300px;
background-color: red;
}
.parent1 .child{
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
font-size: 16px;
}
/* 方法二:空元素法 */
/* 思路:使用一个空标签span设置他的vertical-align基准线为中间,并且让他为inline-block,宽度为0
缺点:多了一个没用的空标签,display:inline-blockIE 6 7是不支持的(添加上:_zoom1;*display:inline)。当然也可以使用伪元素来代替span标签,不过IE支持也不好 */
.parent2{
height:300px;
width: 300px;
text-align: center;
background: red;
}
.parent2 span{
display: inline-block;;
width: 0;
height: 100%;
vertical-align: middle;
zoom: 1;/*BFC*/
*display: inline;
}
.parent2 .child{
display: inline-block;
color: #fff;
zoom: 1;/*BFC*/
*display: inline;
}
/* 方法三:-50%法 */
/* 注意事项:1、子绝夫相 2、子上50%,左50% 3、子平移自身高宽各一半 */
.parent3{
position: relative;
height:300px;
width: 300px;
background: red;
}
.parent3 .child{
position: absolute;
top: 50%;
left: 50%;
color: #fff;
/*translate属性中的百分比指的是自身的*/
transform: translate(-50%,-50%);
/* transform: translate(-51.01px,-10.5px); */
}
/* 方法四:弹性布局flex */
/* 优点:简单 快捷
缺点:低端pc浏览器和低版本的安卓设备不支持,不过现在应该很少有这种情况了*/
.parent4{
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height:300px;
background: red;
}
.parent4 .child{
color:#fff;
}
/* 方法五:绝对定位法 */
/* 思路:父元素使用定位(相对/绝对都行),子元素设置position:absolute; top: 0; left: 0; bottom: 0; right: 0; margin:auto;
优点:兼容性好,父元素宽高可变,使用非常灵活,在做全屏居中的时候很好
缺点:子元素还是要指定宽高,可以用百分比 */
.parent5{
position:absolute;
width: 300px;
height:300px;
background: red;
}
.parent5 .child{
color:#fff;
margin: auto;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
text-align:center;
width:50%;
height:20%;
}
</style>
</head>
<body>
<!-- 方法一 -->
<div class="parent1">
<div class="child">方法一</div>
</div>
<!-- 方法二 -->
<div class="parent2">
<span></span>
<div class="child">方法二</div>
</div>
<!-- 方法三 -->
<div class="parent3">
<div class="child">方法三</div>
</div>
<!-- 方法四 -->
<div class="parent4">
<div class="child">方法四</div>
</div>
<!-- 方法五-->
<div class="parent5">
<div class="child">方法五</div>
</div>
</body>
</html>