CSS实现垂直居中的4种思路详解

时间：2017-09-21

[注意]若子元素的高度已知，translate()函数也可替换为margin-top: 负的高度值。

<style>
.parent{
  position:relative;
}
.child{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>
<div class="parent" style="background-color: lightgray; height:100px;">
  <div class="child" style="background-color: lightblue;">测试文字</div>
</div>

【2】若子元素定高，结合绝对定位的盒模型属性，实现居中效果

<style>
.parent{
  position: relative;
}
.child{
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto 0;
 height: 50px;
}
</style>
<div class="parent" style="background-color: lightgray; height:100px;">
  <div class="child" style="background-color: lightblue;">测试文字</div>
</div>

<关于增加div层级的说明>

在水平居中对齐中，元素外层套一层div并设置absolute，元素设置负margin-left或者relative的负left属性，可以实现水平居中的效果。但由于margin是相对于包含块宽度的，这样margin-top:-50%得到的是宽度而不是高度的-50%，所以不可行；对于relative的百分比取值而言，在包含块高度为auto的情况下，chrome、safari和IE8+浏览器都不支持设置元素的百分比top值，所以也不可行。

思路四：使用弹性盒模型flex实现垂直居中

[注意] IE9-浏览器不支持

【1】在伸缩容器上设置侧轴对齐方式align-items: center

<style>
.parent{
  display: flex;
  align-items: center;
}
</style>
<div class="parent" style="background-color: gray; height: 100px;">
    <div class="child" style="background-color: lightblue;">测试文字</div>   
</div>

【2】在伸缩项目上设置margin: auto 0

<style>
.parent{
  display: flex;
}
.child{
  margin: auto 0;
}
</style>
<div class="parent" style="background-color: gray; height: 100px;">
    <div class="child" style="background-color: lightblue;">测试文字</div>   
</div>

总结

以上所述是小编给大家介绍的CSS实现垂直居中的4种思路详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及

时回复大家的。在此也非常感谢大家对网站的支持！

共2页:

2/2下一篇

上一篇：CSS3的calc()做响应模式布局的实现方法 下一篇：css实现0.5像素的边框的示例代码

CSS实现垂直居中的4种思路详解

相关文章

最新文章