脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 >

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

  发布时间：2016-06-14 08:56:17   作者：佚名   我要评论
下面小编就为大家带来一篇CSS 实现垂直居中的几种方法(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

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

•方式一 ：table 布局方法

•直接上🐴：

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

效果：

    • •分析

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

    •缺点：IE8 还没搞定。　　

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

    CSS Code复制内容到剪贴板
    1. <!DOCTYPE html>   
    2. <html lang="en">   
    3. <head>   
    4.     <meta charset="UTF-8">   
    5.     <title>vertical-center</title>   
    6. </head>   
    7. <body>   
    8.     <style>   
    9.         .container{   
    10.             width: 200px;   
    11.             height: 200px;   
    12.             background-color: #003366;   
    13.             position: relative;   
    14.             text-align: center;   
    15.             display: table;   
    16.         }   
    17.         .content{   
    18.             width:100px;   
    19.             height: 100px;   
    20.             background-color: yellow;   
    21.             position: absolute;   
    22.             top:50%;   
    23.             margin-top: -50px;   
    24. 　　　　     left:50%;   
    25. 　　        margin-left:-50px;     
    26.         }   
    27.         .point{   
    28.             width:50px;   
    29.             height: 50px;   
    30.             position: absolute;   
    31.             top: 50%;   
    32.             margin-top: -25px;   
    33.             left:50%;   
    34.             margin-left:-50px;   
    35.             background-color: green;   
    36.         }   
    37.   
    38.     </style>   
    39.   
    40.     <div class="container">   
    41.         <div class="content">   
    42.             <div class="point">   
    43.                 point goes here.   
    44.             </div>   
    45.         </div>   
    46.     </div>   
    47. </body>   
    48. </html>  

    •就这样，我们实现了垂直和水平的居中

    • 上面提到的方法，都有局限性，下面介绍一种通用的方法，不过是 CSS3实现的，但是通用。

    XML/HTML Code复制内容到剪贴板
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
    3. <head>  
    4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
    5.     <title>haorooms不固定高度div写法</title>  
    6.   
    7.     <style>  
    8. .center {   
    9.   position: fixed;   
    10.   top: 50%;   
    11.   left: 50%;   
    12.   background-color: #000;   
    13.   width:50%;   
    14.   height: 50%;   
    15. -webkit-transform: translateX(-50%) translateY(-50%);   
    16. }   
    17.   
    18.   
    19.     </style>  
    20. </head>  
    21. <body>  
    22.     <div class="center"></div>  
    23. </body>  
    24. </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; 就先写这么多吧，先吃饭去啦~

    以上这篇CSS 实现垂直居中的几种方法(必看)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

    原文地址：http://www.cnblogs.com/Slim-Shady/archive/2016/06/13/5582324.html

    相关文章

    • CSS水平垂直居中的几种方法总结

      这篇文章主要介绍了CSS水平垂直居中的几种方法总结,垂直居中是布局中十分常见的效果之一,本文介绍了几种方法，有兴趣的可以了解一下。
      2016-12-19

    • css让容器水平垂直居中的7种方式

      这篇文章主要为大家详细介绍了css让容器水平垂直居中的7种方式,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
      2016-10-17

    • 利用CSS3的flexbox实现水平垂直居中与三列等高布局

      这篇文章给大家介绍了三个小节的内容，其中包括关于css3中flexbox需要掌握的概念、flexbox实现水平垂直居中对齐和三列等高自适应页脚区域黏附底部的布局，有需要的可以参考
      2016-09-12

    • CSS设置文字图片垂直居中的方法总结

      这篇文章给大家演示了在不知道高度的情况下图片如何垂直居中对齐，文中给出了实例代码，有需要的朋友们可以参考借鉴。下面来一起看看吧。
      2016-09-12

    • 深入理解CSS行高line-height与文本垂直居中的原理

      本文详细介绍了CSS行高属性line-height与文本垂直居中的原理，通过本文的介绍相信对大家以后使用line-height和设置文本垂直居中会更加熟练，有需要的可以参考借鉴。下面一
      2016-08-12

    • Flexbox制作CSS布局实现水平垂直居中的简单实例

      下面小编就为大家带来一篇Flexbox制作CSS布局实现水平垂直居中的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
      2016-07-27

    • CSS设置DIV垂直居中的N种方法 兼容IE浏览器

      这篇文章主要为大家详细介绍了兼容IE浏览器CSS设置DIV垂直居中的N种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
      2016-07-05

    • CSS文本和div垂直居中方法总结

      这篇文章主要介绍了CSS文本和div垂直居中方法总结，包括多行文本垂直居中,单行文本垂直居中,子div垂直居中，感兴趣的小伙伴们可以参考一下
      2016-07-04

    • CSS在固定宽高的div内实现垂直居中的实例详解

      这篇文章主要介绍了CSS在固定宽高的div内实现垂直居中的实例详解,即在div内部元素相对于div垂直居中的方法,需要的朋友可以参考下
      2016-06-03

    • CSS实现垂直居中的几种方法小结

      在前端布局过程中，我们实现水平居中比较简单，一般通过margin:0 auto;和父元素 text-align: center;就能实现。今天小编给大家带来了CSS实现垂直居中的几种方法小结，感兴
      2019-05-14

    最新评论

    关注微信公众号

    扫一扫