最近看到一个问题就是让绝对定位的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. C# 将json字符串进行排序 转成键值

    public static string StortJson(string json) { var dic = JsonConvert.DeserializeObject<SortedDicti ...

  2. webform中DropdownList绑定多个字段

    说明 ListItem中有Attributes属性,手动创建一个自定义属性,赋值需要绑定的字段的值. 这样的话,前台js也可以获取到,能够显示到前台html,进行控制. 代码 foreach(Data ...

  3. NAT、端口映射、内网穿透、公网IP都是啥

    原文地址:https://wuter.cn/1756.html/ 一.IPv4地址 IP协议是为计算机网络相互连接进行通信而设计的协议,它是能使连接到网上的所有计算机网络实现相互通信的一套规则. 这里 ...

  4. sql语句用法大全

    https://www.w3school.com.cn/sql/sql_in.asp .substr函数格式   (俗称:字符截取函数) 格式1: substr(string string, int ...

  5. python +pycharm+selenium 环境搭建

    一:首先安装python:   https://www.python.org/downloads/: 下载完后一步步的点击安装,验证是否安装成功:打开win+r 打开cmd命令,输入python -V ...

  6. [LeetCode]654. Maximum Binary Tree最大堆二叉树

    每次找到数组中的最大值,然后递归的构建左右树 public TreeNode constructMaximumBinaryTree(int[] nums) { if (nums.length==0) ...

  7. CentOS 搭建 SVN 服务器 及使用教程

    服务器与客户端 1.搭建SVN服务器 ① CentOS安装SVN 命令: yum -y install subversion 检查是否安装成功 命令: svn --version 如果显示如下内容说明 ...

  8. canvas--总结一

    一.什么是Canvas? HTML5的canvas元素使用JavaScript在网页上绘制图像: 画布是一个矩形区域,可以控制其每一像素: canvas拥有多种绘制路径,矩形,圆形,字符以及添加图像的 ...

  9. 【译】深入理解Rust中的生命周期

    原文标题:Understanding Rust Lifetimes 原文链接:https://medium.com/nearprotocol/understanding-rust-lifetimes- ...

  10. mysql使用全文索引实现大字段的模糊查询

    0.场景说明 centos7 mysql5.7 InnoDB引擎 0.1创建表 DROP TABLE IF EXISTS tbl_article_content; CREATE TABLE tbl_a ...