总结七种实现html/CSS垂直水平居中的办法
第一种：flex布局（不定宽高）-- (ie11)【推荐-兼容性好些】
第二种：grid布局（不定宽高）-- (不支持ie)
第三种：table-cell布局(不定宽高) -- 兼容性好 (ie7)
第四种：定位+margin:auto(不定宽高) -- 兼容性好
第五种：transfrom(不定宽高)；--兼容性好（ie9+）
第六种：定位+calc（固定宽高）；-- 兼容性好
第七种：定位+margin（固定宽高）；-- 兼容性好
温馨提示：所有代码在文末，可直接复制查看效果
公共样式代码
.fatherBox{
width: 200px;
height: 200px;
border: 1px solid black;
}
.childBox{
width: 150px;
height: 150px;
border: 1px solid red;
}
第一种.flex布局（不定宽高）
html代码
<div class="fatherBox flex-father">
<div class="childBox">
flex
</div>
</div>
css代码
.flex-father{
display: flex;
justify-content: center;
align-items: center;
}
效果图
WechatIMG56.jpg
第二种：grid布局（不定宽高）
html代码
<div class="fatherBox grid-father">
<div class="childBox">
grid
</div>
</div>
css代码
.grid-father{
display: grid;
justify-content: center;
align-items: center;
}
WechatIMG57.jpg
第三种：table-cell布局(不定宽高) - 兼容性好 (ie7)
原理：在父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为inline-block元素
html代码
<div class="fatherBox table-father">
<div class="childBox table-child" >
table-cell
</div>
</div>
css代码
.table-father{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.table-child{
display: inline-block;
}
WechatIMG58.jpg
第四种：定位+margin:auto(不定宽高)
html代码
<div class="fatherBox auto-father">
<div class="childBox auto-child" >
auto
</div>
</div>
css代码
.auto-father{
position: relative;
}
.auto-child{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
WechatIMG60.jpg
第五种：transfrom(不定宽高)
html代码
<div class="fatherBox transform-father">
<div class="childBox transform-child" >
transform
</div>
</div>
css代码
.transform-father{
position: relative;
}
.transform-child{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
WechatIMG59.jpg
第六种：定位+calc（固定宽高）
html代码
<div class="fatherBox calc-father">
<div class="childBox calc-child" >
calc
</div>
</div>
css代码
.calc-father{
position: relative;
}
.calc-child{
position: absolute;
top: calc(50% - 75px);
left: calc(50% - 75px);
}
WechatIMG62.jpg
第七种：定位+margin（固定宽高）
html代码
<div class="fatherBox margin-father">
<div class="childBox margin-child" >
margin
</div>
</div>
css代码
.margin-father{
position: relative;
}
.margin-child{
position: absolute;
left: 50%;
top: 50%;
margin-top: -75px;
margin-left: -75px;
}
WechatIMG61.jpg
整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css垂直水平居中</title>
</head>
<style>
//共公样式、、、
.fatherBox{
width: 200px;
height: 200px;
border: 1px solid black;
}
.childBox{
width: 150px;
height: 150px;
border: 1px solid red;
}
//、、、
.flex-father{
display: flex;
justify-content: center;
align-items: center;
}
.grid-father{
display: grid;
justify-content: center;
align-items: center;
}
.table-father{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.table-child{
display: inline-block;
}
.transform-father{
position: relative;
}
.transform-child{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.margin-father{
position: relative;
}
.margin-child{
position: absolute;
left: 50%;
top: 50%;
margin-top: -75px;
margin-left: -75px;
}
.auto-father{
position: relative;
}
.auto-child{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
.calc-father{
position: relative;
}
.calc-child{
position: absolute;
top: calc(50% - 75px);
left: calc(50% - 75px);
}
</style>
<body>
<div>css垂直水平居中</div>
<div class="fatherBox flex-father">
<div class="childBox">
flex
</div>
</div>
<br/>
<div class="fatherBox grid-father">
<div class="childBox">
grid
</div>
</div>
<br/>
<div class="fatherBox table-father">
<div class="childBox table-child" >
table-cell
</div>
</div>
<br/>
<div class="fatherBox transform-father">
<div class="childBox transform-child" >
transform
</div>
</div>
<br/>
<div class="fatherBox auto-father">
<div class="childBox auto-child" >
auto
</div>
</div>
<br/>
<div class="fatherBox margin-father">
<div class="childBox margin-child" >
margin
</div>
</div>
<br/>
<div class="fatherBox calc-father">
<div class="childBox calc-child" >
calc
</div>
</div>
</body>
</html>
网友评论