架构师_程序员

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 91|回复: 0

[CSS/DIV] html设置居中

[复制链接]
跳转到指定楼层
楼主
发表于 2019-6-30 20:39:26
zu


前言
前段时间接了一个前端的项目,写公司的官网,就一个静态网站,加几个动态效果。老实说,一开始看到网站的时候,觉得So easy的。但是一写起来,发现样式炸裂。在这个浏览器上样式是好的,在另一个浏览器上就炸了,真的是可怕。以后再也不接自己不擅长的东西了。本篇整理了一下,居中样式的写法。



正文


下面将记录四种居中的写法

1:定位+translaste
2:flex布局
3:inline-block
4:知道具体宽高了,还有什么做不到的吗???

新建一个html页面,将下面代码粘进去,直接双击运行:


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>上下左右居中</title>
  6. <style type="text/css">
  7.         div[id^=parent]{margin: auto;}
  8.         
  9.         /*法一:定位+translaste,忽略父子的宽高*/
  10.         #parent1{
  11.                 position: relative;
  12.         }
  13.         #child1{
  14.                 position: absolute;
  15.                 left: 50%;
  16.                 top: 50%;
  17.                 -webkit-transform: translateX(-50%) translateY(-50%);
  18.                 -ms-transform: translateX(-50%) translateY(-50%);
  19.                 -moz-transform: translateX(-50%) translateY(-50%);
  20.                 -o-transform: translateX(-50%) translateY(-50%);
  21.                 transform: translateX(-50%) translateY(-50%);
  22.         }
  23.         
  24.         /*法二:flex布局,忽略父子的宽高*/
  25.         #parent2{
  26.                 display: -webkit-flex;
  27.                 display: -ms-flex;
  28.                 display: flex;
  29.                 -webkit-align-items: center;
  30.                 align-items: center;
  31.                 -webkit-justify-content: center;
  32.                 justify-content: center;
  33.         }
  34.         
  35.         /*法三:inline-block,需要知道父级高度*/
  36.         #parent3{
  37.                 font-size: 0;/*去除内联块中空格所占空间*/
  38.                 text-align: center;
  39.                 line-height: 500px;
  40.         }
  41.         #child3{
  42.                 display: inline-block;
  43.                 vertical-align: middle;
  44.         }
  45.         
  46.         /*法四:知道具体宽高了,还有什么做不到的吗???*/
  47.         
  48.         
  49. </style>
  50. </head>

  51. <body>

  52. <!--1-->
  53. <div id="parent1" style="width: 500px;height: 500px;background-color: #f7f7f7;margin-bottom: 10px;">
  54.         <div id="child1" style="width: 300px;height: 300px;background:-webkit-linear-gradient(blue,red);background:-o-linear-gradient(blue,red);background:-moz-linear-gradient(blue,red);background:linear-gradient(blue,red)"></div>
  55. </div>

  56. <!--2-->
  57. <div id="parent2" style="width: 500px;height: 500px;background-color: #f7f7f7;margin-bottom: 10px;">
  58.         <div id="child2" style="width: 300px;height: 300px;background-color: green;"></div>
  59. </div>

  60. <!--3-->
  61. <div id="parent3" style="width: 500px;height: 500px;background-color: #f7f7f7;margin-bottom: 10px;">
  62.         <div id="child3" style="width: 300px;height: 300px;background-color: blue;"></div>
  63. </div>

  64. </body>
  65. </html>
复制代码


尾声


脑阔痛,除了居中,写页面,还有一些浮动的坑。下次把处理浮动的坑也整理一波,比如 隔墙法,内墙法,overflowhidden法等等。














上一篇:Java 封装zip解压缩方法
下一篇:WLOP-更新至2019年6月天使阶
帖子永久地址: 

架构师_程序员 - 论坛版权1、本主题所有言论和图片纯属会员个人意见,与本论坛立场无关
2、本站所有主题由该帖子作者发表,该帖子作者与架构师_程序员享有帖子相关版权
3、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和架构师_程序员的同意
4、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
5、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责
6、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意
7、架构师_程序员管理员和版主有权不事先通知发贴者而删除本文

码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

Mail To:help@itsvse.com

QQ|Archiver|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2019-7-17 14:20

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表