欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-25 13:21:49
...
最近在学关系型数据库相关,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;

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