当前位置：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 布局方法

直接上?：

效果：

分析

优点：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;

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

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

人气教程排行