程序员之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 >

CSS 垂直水平居中的5种最佳解决方案

  发布时间：2018-01-11 15:00:08   作者：佚名   我要评论
本文给大家分享CSS 垂直水平居中的5种最佳解决方案以及各自的优缺点，本文给大家介绍的非常详细，具有参考借鉴价值，需要的朋友参考下吧
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

CSS 居中对齐

  • 代码中均省略了浏览器前缀
  • 以下例子以我的个人的标准排序
  • 当然也有更多的居中处理方法 但我觉得只有这5种方法是最完善的解决方案

flex 居中

优点：可对未知高度进行居中处理

<style>
    .wrap{height: 100%;display: flex; justify-content: center; align-items: center;align-content:center;}
    
    .other{background-color: #ccc; width: 400px;height: 400px;} /* 额外的样式 可去除 */
</style>
<div class="wrap">
    <div class="other">
        <h2>这是第二层的内容 不会居中</h2>
    </div>
</div>

position + translate 居中

优点： 可对未知高度进行居中处理、嵌套层最少

<style>
    /* position 可选 absolute|fixed*/
    .center{position: absolute;left: 50%;top: 50%; transform: translate(-50%,-50%);}
    
    .other{background-color: #ccc; } /* 额外的样式 可去除 */
</style>
<div class="center other">
    <h2>这一层的内容 不会居中</h2>
</div>

table-cell 居中

缺点：1. 居中层需要设置宽度(.center)。 2.外层多嵌套一层(.cell) 3. 居中层必须设置宽度(允许 %)

<style>
    .wrap{display: table;width: 100%;height: 100%;}
    .cell{display: table-cell;vertical-align:middle;}
    .center{width: 400px;margin-left:auto;margin-right:auto;}
    .other{background-color: #ccc;  height: 400px;} /* 额外的样式 可去除 */
</style>
<div class="wrap">
    <div class="cell">
        <div class="center other">
            <h2>这一层的内容 不会居中</h2>
        </div>
    </div>
</div>

传统居中 (2种)

缺点：1. margin 值必须为auto。 2. 居中层必须设置高宽(允许 %) 3. 必须使用 position

<style>
    /*
        1. left、top、right、bottom 可以任意,但必须相等
        2. position 可选 absolute|fixed
    */
    .center{position: absolute;left: 10px;top: 10px;right: 10px;bottom: 10px;margin: auto;width: 400px;height: 400px;}
    .other{background-color: #ccc; } /* 额外的样式 可去除 */
</style>
<div class="center other">
    <h2>这一层的内容 不会居中</h2>
</div>

缺点： 居中层必须设置固定高宽,并且magin需要通过高宽计算得出。

<style>
    .wrap{position: relative;height: 100%;}
    .center{position: absolute;left: 50%;top: 50%; width: 400px;height: 300px; margin-left: -200px;margin-top: -150px;}
    .other{background-color: #ccc; } /* 额外的样式 可去除 */
</style>
<div class="wrap">
    <div class="center other">
        <h2>这一层的内容 不会居中</h2>
    </div>
</div>

总结

以上所述是小编给大家介绍的CSS 垂直水平居中的5种最佳解决方案，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对程序员之家网站的支持！

相关文章

  • CSS水平垂直居中解决方案(6种)

    这篇文章主要介绍了CSS水平垂直居中解决方案(6种)的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-02-10

  • 利用css设置元素垂直居中的解决方法汇总

    作为前端攻城师，在制作Web页面时都有碰到CSS制作水平垂直居中，我想大家都有研究过或者写过，特别的其中的垂直居中，更是让人烦恼，下面这篇文章主要给大家汇总介绍了关于
    2017-09-12

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

    这篇文章给大家整理四种css实现垂直居中效果，思路明了非常不错，具有参考借鉴价值，需要的朋友参考下吧
    2017-09-06

  • css实现元素水平垂直居中常见的两种方式实例详解

    这篇文章主要给大家介绍了css实现元素水平垂直居中的两种方式，文中给出了完整的示例代码供大家参考学习，对大家的学习或者工作具有一定的参考价值，有需要的朋友们下面来
    2017-04-23

  • CSS水平垂直居中的几种方法总结

    这篇文章主要介绍了CSS水平垂直居中的几种方法总结,垂直居中是布局中十分常见的效果之一,本文介绍了几种方法，有兴趣的可以了解一下。
    2016-12-19

  • css让容器水平垂直居中的7种方式

    这篇文章主要为大家详细介绍了css让容器水平垂直居中的7种方式,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-17

  • 利用CSS3的flexbox实现水平垂直居中与三列等高布局

    这篇文章给大家介绍了三个小节的内容，其中包括关于css3中flexbox需要掌握的概念、flexbox实现水平垂直居中对齐和三列等高自适应页脚区域黏附底部的布局，有需要的可以参考
    2016-09-12

  • CSS设置文字图片垂直居中的方法总结

    这篇文章给大家演示了在不知道高度的情况下图片如何垂直居中对齐，文中给出了实例代码，有需要的朋友们可以参考借鉴。下面来一起看看吧。
    2016-09-12

  • 深入理解CSS行高line-height与文本垂直居中的原理

    本文详细介绍了CSS行高属性line-height与文本垂直居中的原理，通过本文的介绍相信对大家以后使用line-height和设置文本垂直居中会更加熟练，有需要的可以参考借鉴。下面一
    2016-08-12

  • 23种CSS垂直居中技巧

    本文给大家分享23中css垂直居中的处理方法，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
    2018-08-27

最新评论

关注微信公众号

扫一扫
?


http://www.vxiaotou.com