最近看到一个问题就是让绝对定位的div居中，在尝试了top：50%；left：50%；后发现，居中是有问题的并不是想象中的样子

需要再加两句margin-top：-盒子高度的一般px  margin-left:-盒子宽度的一般px；

就这样让一个绝对定位的盒子居中就实现了，但是有一个缺点就是，必须要知道盒子的高宽；

我们可使用css3里面的transform实现，设置left为50%，transform：translateX（-50%）即可实现不得到宽实现居中；

让绝对定位的div居中的更多相关文章

  1. div居中方法总结

    在日常开发过程中,我们会经常使用到div居中来处理布局,今天我就把我在开发过程中,遇到的div居中处理方法总结一下,方便日后查看!        1. 水平居中:给div设置一个宽度,然后添加marg ...

  2. 绝对定位的DIV绝对居中显示

    绝对居中:即在客户端上任何分辨率下纵横方向均居中 紫色的正方形为绝对定位的div position:absolute; top: 50%; left: 50%; 只能把div定位在以红色圈为起点的位置 ...

  3. css文字居中、图片居中、div居中解决方案

    一.文字居中 若文字只有一行 <!--html代码--> <div class="box"> <p class="text"> ...

  4. 关于百分比宽高div居中并垂直居中问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. bootstrap之div居中

    bootstrap之div居中 偏移列 偏移是一个用于更专业的布局的有用功能.它们可用来给列腾出更多的空间.例如,.col-xs=* 类不支持偏移,但是它们可以简单地通过使用一个空的单元格来实现该效果 ...

  6. 移动页面div居中效果代码

    在线查看效果:http://hovertree.com/texiao/mobile/4.htm 可用手机浏览器查看 以下为HTML文件: <!DOCTYPE html> <html& ...

  7. 【转】div居中代码 DIV水平居中显示CSS代码

    原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...

  8. 【转】CSS中怎么让DIV居中

    来源:http://www.cnblogs.com/DebugLZQ/archive/2011/08/09/2132381.html     CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的 ...

  9. 关于div居中

    margin : 100px; margin-left: auto; margin-right: auto; 这样子设置css样式就可以实现一个div居中

随机推荐

  1. python序列（二）列表的删除操作

    1.使用del命令删除列表中的指定位置上的元素 >>> s=[1,2,3,4] >>> del s[1] >>> s [1, 3, 4] 2.使用 ...

  2. sql去除重复的几种方法

    所以用这样一句SQL就可以去掉重复项了: select * from msg group by terminal_id; SQL中distinct的用法(四种示例分析) 示例1 select dist ...

  3. IDEA和eclips工具对比

    描述 eclipse idea 在当前类查找方法 ctrl+o ctrl+F12 查找文件   ctrl+shift+N 大小写转换 ctrl+shift+X    ctrl+shift+Y ctrl ...

  4. [leetcode]49. Group Anagrams重排列字符串分组

    是之前的重排列字符串的延伸,判断是重排列后存到HashMap中进行分组 这种HashMap进行分组的方式很常用 public List<List<String>> groupA ...

  5. Hadoop3.2.0+Centos7三节点完全分布式安装配置

    一.环境准备 ①准备三台虚拟机,配置静态IP ②先修改主机名(每个节点统一命名规范) vim /etc/hostname master #重启生效 配置DNS每个节点 vim /etc/hosts 1 ...

  6. rocketmq 架构设计

    1 消息存储 消息存储是RocketMQ中最为复杂和最为重要的一部分,本节将分别从RocketMQ的消息存储整体架构.PageCache与Mmap内存映射以及RocketMQ中两种不同的刷盘方式三方面 ...

  7. [开源软件] 腾讯云Linux服务器一键安装LAMP/LNMP/LANMP环境 转

    本帖最后由 我本戏子 于 2015-8-13 22:00 编辑OneinStack是非常优秀的一键PHP/JAVA安装脚本,提供以下环境:lnmp(Linux + Nginx+ MySQL+ PHP) ...

  8. 利用python 5分钟制作一款小游戏

    1.安装pygame 在命令行cmd中输入:pip install pygame ( 注:如果安装不成功,需要输入:python -m pip install --user --upgrade pip ...

  9. 多媒体开发（5）&音频特征：声音可以调大一点吗？

    基本上,现在常用的声音采样办法是pcm,而对于压缩音频的解码,得到的也pcm数据.这个pcm数据,只是一堆数值,有正有负,看这个值看不出什么花样. 声音采集,采的是什么呢? 采的是声音的强度变化,也是 ...

  10. SpringBoot项目，如何优雅的把接口参数中的空白值替换为null值？

    问题发生 我们公司代码生成的时候,查询列表统一都是使用了setEntity() ,查询写法如下: public List<BasReservoirArea> selectList(BasR ...