首页 > 开发 > CSS > 正文

CSS 实现垂直居中的几种方法(必看)

2024-07-11 08:32:49
字体:
来源:转载
供稿:网友

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

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

•方式一 :table 布局方法

•直接上🐴:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>   <html lang="en">  
  2. <head>   <meta charset="UTF-8">  
  3. <title>Title</title>   </head>  
  4. <body>   <style>  
  5. .container{    width: 200px;   
  6. height: 200px;    font-weight:bold;">deepskyblue;   
  7. display: table;    }   
  8. .cell{    display: table-cell;   
  9. vertical-align: middle;    font-weight:bold;">lawngreen;   
  10. }    .content{   
  11. font-weight:bold;">yellow;    }   
  12. </style>   <div class="container">  
  13. <div class="cell">   <div class="content">  
  14. Content    </div>  
  15. </div>   </div>  
  16. </body>   </html>   

效果:

•分析

•优点:content 高度可以动态改变,无须担心父级容器高度不够被截断;

•缺点:IE8 还没搞定。  

•方式二:布局对象固定高度

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html>    <html lang="en">   
  2. <head>        <meta charset="UTF-8">   
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表