1000元配置

2000元配置

3000元配置

4000元配置

5000元配置

6000元配置

7000元配置

8000元配置

9000元配置

万元配置

i3配置

 i5配置

i7配置

APU配置

R5配置

R7配置

游戏攻略

软件教程

Win10教程

Win7教程

Mac教程

Linux教程

U盘教程

Server教程

首页 > 网页制作 > CSS

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

admin CSS 2022-02-06 16:06:41 CSS   垂直居中"

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

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

•方式一 ：table 布局方法

•直接上：

XML/HTML Code复制内容到剪贴板
  1. >  
  2. <html lang="en">  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>Titletitle>  
  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.   
    2. "en">   
    3.   
    4.     "UTF-8">   
    5.     vertical-</span><span class="string">center</span><span>   
    6.   
    7.   
    8.        
    9.   
    10.     "container">   
    11.         "content">   
    12.             "point">   
    13.                 point goes here.   
    14.             
      
  •         
    •   
  •     
    •   
  •   
  •   

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

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

    XML/HTML Code复制内容到剪贴板
    1. >  
    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

    版权声明

    本文仅代表作者观点，不代表本站立场。
    本文系作者授权发表，未经许可，不得转载。
    本文地址：/web/CSS/77875.html

    上一篇 : 设置层的漂移的简单实现方法
    下一篇 : CSS3实现翘边的阴影效果的代码示例

    相关文章

    留言与评论（共有 0 条评论）
       
    验证码：

    热门文章

    最近发表

    标签列表

    潘少俊衡

    | 桂ICP备2023010378号-4

    Powered By EmpireCMS

    爱享小站

    中德益农

    谷姐神农

    环亚肥料

    桂ICP备2023010378号-4

    桂公网备 45012202000125号

    联系我们

    商业合作

    广告投放

    投稿须知

    使用手机软件扫描微信二维码

    关注我们可获取更多热点资讯

    感谢潘少俊衡友情技术支持