当前位置:Gxlcms > html代码 > CSS实现垂直居中的几种方案_html/css_WEB-ITnose

CSS实现垂直居中的几种方案_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:22人阅读

最近在学关系型数据库相关,MySQL 和 Postgre,捎带着学了 PHP,为了练手这几天就忙着自己搭博客,项目部署在某云上,该云算是良心,给的空间自己搭博客用足够了。本来想着每日一bo的,所以有的时候实在来不及就只能隔天更新了。以后尽量发点东西出来,等博客搭完写一写 SQL 数据库基础相关的分享,给跟我一样的小白道友们做下参考,大神请直接无视~

说到居中,很多人第一反应应该是水平居中,说到水平居中,肯定道友们有一万种方法做到,CSS3 的FlexBox更是强大到没朋友。但是良辰今天想聊的是 CSS 垂直居中的方法,下面是萌萌的分割线。神马?你敢说不萌?

  • 方式一 :table 布局方法
  • 直接上?:




    Title






    Content




  • 效果:
  • 分析
  • 优点:content 高度可以动态改变,无须担心父级容器高度不够被截断;
  • 缺点:IE8 还没搞定。  
  • 方式二:布局对象固定高度




  • vertical-center







    point goes here.




  • 就这样,我们实现了垂直和水平的居中
  • 上面提到的方法,都有局限性,下面介绍一种通用的方法,不过是 CSS3实现的,但是通用。
  •   
      haorooms不固定高度div写法  
  • 看吧,我们只是吧 margin 变成translate,其他浏览器的写法如下:
  •   
    -webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);
  • justify-content:center;//子元素水平居中align-items:center;//子元素垂直居中display:-webkit-flex;

    就先写这么多吧,先吃饭去啦~


  • 人气教程排行