最近看到一个问题就是让绝对定位的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. 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。

    前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...

  2. [EF] - 动态创建模型：System.Reflection.Emit + Code First

    动态创建Entity Framework模型并且创建数据库 使用System.Reflection.Emit+Code First model创建以下的一个实体类和DbContext并且创建数据库: ...

  3. python序列（七）序列操作的常用内置函数

    1.len(列表):返回:列表中的元素个数,同样适用于元组.字典.集合.字符串等. max(列表).min(列表):返回列表中的最大或最小元素同样适用于元组.字典.集合.range对象等. sum(列 ...

  4. spring 切面织入报错：java.lang.ClassCastException: com.sun.proxy.$Proxy7 cannot be cast to...

    报这个错,只有一个原因,就是转化的类型不对. 接口过父类的子类,在强制转换的时候,一定要用接口父类来定义. 代码示例: package com.luoluo.dao.impl; import java ...

  5. java零基础之--JDK安装篇

    ---恢复内容开始--- 很多零基础学习者在开始学习java中很难理解JDK的安装和配置,以下是基于Windows 7 的安装配置流程(Windows 10类似) 1. 在安装之前我们先了解几个名词: ...

  6. 【vue】常用指令

    vue指令带有前缀 v-. 一.v-bind 单向数据绑定 在html中显示数据,除了使用插值表达式{{}}之外,也可以使用vue中的v-bind指令. ... ... <body> &l ...

  7. 技术选型关于redis客户端选择

    redis作为分布式缓存框架的首选  相信已经毋庸置疑.能高效.合理的使用好它  必定能提升系统的可用性,高性能.高吞吐量的保障.但选择一个客户端,充分发挥它的能力,就是一个选型问题.现在市场上能选择 ...

  8. 第十二章节 BJROBOT 摄像头寻线 【ROS全开源阿克曼转向智能网联无人驾驶车】

    关于摄像头:普通摄像头, USB 免驱摄像头都可以使用. 1.如下图所示,用红色胶布在地板上贴一条线,小车摆放在线的一头处,让线在小车的中间位置,摄像头角度往下调整倾斜一点,好让摄像头识别到红线.注意 ...

  9. 将WCF迁移到gRPC

    使用protobuf-net.Grpc将WCF服务迁移到gRPC非常简单.在这篇博文中,我们将看看它到底有多简单.微软关于将WCF服务迁移到gRPC的官方指南只提到了Gooogle.Protobuf方 ...

  10. C#扫盲篇(四)：.NET Core 的异步编程-只讲干货（async,await,Task）

    关于async,await,task的用法和解释这里就不要说明了,网上一查一大堆.至于为啥还要写这篇文章,主要是其他文章水分太多,不适合新手学习和理解.以下内容纯属个人理解,如果有误,请高手指正.本文 ...