CSS 实现垂直居中的几种方案_html/css_WEB-ITnose
程序员文章站
2022-03-25 13:21:49
...
最近在学关系型数据库相关,MySQL 和 Postgre,捎带着学了 PHP,为了练手这几天就忙着自己搭博客,项目部署在某云上,该云算是良心,给的空间自己搭博客用足够了。本来想着每日一bo的,所以有的时候实在来不及就只能隔天更新了。以后尽量发点东西出来,等博客搭完写一写 SQL 数据库基础相关的分享,给跟我一样的小白道友们做下参考,大神请直接无视~ 方式一 :table 布局方法 直接上?:
效果: 分析 优点:content 高度可以动态改变,无须担心父级容器高度不够被截断; 缺点:IE8 还没搞定。 方式二:布局对象固定高度
就这样,我们实现了垂直和水平的居中 上面提到的方法,都有局限性,下面介绍一种通用的方法,不过是 CSS3实现的,但是通用。 看吧,我们只是吧 margin 变成translate,其他浏览器的写法如下:
说到居中,很多人第一反应应该是水平居中,说到水平居中,肯定道友们有一万种方法做到,CSS3 的FlexBox更是强大到没朋友。但是良辰今天想聊的是 CSS 垂直居中的方法,下面是萌萌的分割线。神马?你敢说不萌?
Title
Content
vertical-center
point goes here.
haorooms不固定高度div写法
-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;
就先写这么多吧,先吃饭去啦~
上一篇: PHP对话的具体使用技巧分享
下一篇: Yii2.0乐观锁与悲观锁实例详解