博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
元素垂直水平居中
阅读量:5362 次
发布时间:2019-06-15

本文共 835 字,大约阅读时间需要 2 分钟。

本文地址: 

 

1 已知宽高

1.1 定位值上下左右给0

1 /* 父盒子垂直水平居中 */ 2 .box{ 3     background-color: #cccccc; 4     height: 200px; 5     width: 400px; 6     position: absolute; 7     top: 0; 8     left: 0; 9     right:0;10     bottom: 0;11     margin: auto;12 }
  • 只能用于给的宽高的盒子,十分方便,笔者常用

1.2 左上角居中再拉回来

1.2.1 需要计算偏移量

1 .box { 2    position: absolute; 3    left: 50%; 4    top: 50%; 5    background-color: #cccccc; 6    width: 400px; 7    height: 200px; 8    margin-left: -200px; 9    margin-top: -100px;  /* 需根据宽高计算偏移量 */10 }
  • 需要知道宽高还得计算,笔者基本不用,嫌麻烦。。。

1.2.2 不用计算偏移量

1 .box {2     position: absolute;3     left: 50%;4     top: 50%;5     background-color: #cccccc;6     width: 400px;7     height: 200px;8     transform:  translate(-50%,-50%);  /* 此处不用自己计算偏移量 */ 9 }
  • IE不支持,一口老血。。。

2 元素宽高不确定

2.1 同1.2.2

2.2 flex以后再写个专题

转载于:https://www.cnblogs.com/veinyin/p/7606390.html

你可能感兴趣的文章
mac下python实现vmstat
查看>>
剑指Offer——跳台阶
查看>>
【MYSQL笔记】
查看>>
HDU - 6446 Tree and Permutation
查看>>
mysql内置函数
查看>>
titanium开发教程-03-01理解tab group
查看>>
02.极简主义——健康(笔记)
查看>>
02.规划过程组表格-项目范围说明书
查看>>
SQL语句(十六)实现集合运算、对数据修改、数据表复制
查看>>
poi-处理excel的单元格日期数据
查看>>
c随机数&运行时间
查看>>
再谈Weiphp公众平台开发——1、成语接龙插件
查看>>
foreach
查看>>
C语言引用连接脚本lds中的符号——清除bss段,c实现方式
查看>>
$CH0501$ 货仓选址
查看>>
菜鸟程序猿之IDEA快捷键
查看>>
MySQL在linux下安装
查看>>
17.VUE学习之- v-for指令的使用方法
查看>>
activeMq密码配置 - 6
查看>>
jxl.dll操作总结
查看>>