你的位置:首页 > 网页设计

[网页设计]CSS 实现垂直居中的几种方案


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

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


 

  • 方式一 :table 布局方法
    • 直接上🐴:
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <title>Title</title>
      </head>
      <body>
      <style>
      .container{
      width: 200px;
      height: 200px;
      font-weight:bold;">deepskyblue;
      display: table;
      }
      .cell{
      display: table-cell;
      vertical-align: middle;
      font-weight:bold;">lawngreen;
      }
      .content{
      font-weight:bold;">yellow;
      }
      </style>
      <div >
      <div >
      <div >
      Content
      </div>
      </div>
      </div>
      </body>
      </html>
    • 效果:
    • 分析
      • 优点:content 高度可以动态改变,无须担心父级容器高度不够被截断;
      • 缺点:IE8 还没搞定。  

 

  • 方式二:布局对象固定高度
      • <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>vertical-center</title>
        </head>
        <body>
        <style>
        .container{
        width: 200px;
        height: 200px;
        background-color: #003366;
        position: relative;
        text-align: center;
        display: table;
        }
        .content{
        width:100px;
        height: 100px;
        background-color: yellow;
        position: absolute;
        top:50%;
        margin-top: -50px;
             left:50%;
           margin-left:-50px;
        }
        .point{
        width:50px;
        height: 50px;
        position: absolute;
        top: 50%;
        margin-top: -25px;
        left:50%;
        margin-left:-50px;
        background-color: green;
        }
          </style>

        <div >
        <div >
        <div >
        point goes here.
        </div>
        </div>
        </div>
        </body>
        </html>
    • 就这样,我们实现了垂直和水平的居中

  • 上面提到的方法,都有局限性,下面介绍一种通用的方法,不过是 CSS3实现的,但是通用。
    •   
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html ="http://www.w3.org/1999/xhtml" ="en"><head>  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  <title>haorooms不固定高度div写法</title>  <style>.center { position: fixed; top: 50%; left: 50%; background-color: #000; width:50%; height: 50%;-webkit-transform: translateX(-50%) translateY(-50%);}  </style></head><body>  <div class="center"></div></body></html>
    • 看吧,我们只是吧 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;

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