最近看到一个问题就是让绝对定位的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. 一种简单的吉布斯采样modify中应用

    这是主函数clc; clear all; close all; %% 生成初始序列 sequenceOfLength = 20; sequenceOfPop = 4; sequence = produ ...

  2. locust的使用

    一.简介 Locust是一款使用Python编写的压力测试工具,本篇总结会介绍在实际测试过程中遇到的问题 https://www.locust.io/ 使用Locust的原因是因为可以模拟的用户数量可 ...

  3. 官方VisualStudio.gitignore配置

    官方地址 https://github.com/github/gitignore/blob/master/VisualStudio.gitignore 示例 ## Ignore Visual Stud ...

  4. 【进程/作业管理】篇章二：Linux系统作业控制(jobs)

    作业:jobs 分类: 前台作业(foregroud):通过终端启动,且启动后会一直占据终端 后台作业(backgroud):可以通过终端启动,但启动后即转入后台运行(释放终端) 如何让作业运行于后台 ...

  5. ElasticSearch设置用户名密码访问

    版本号:7.3.1 1.需要在配置文件中开启x-pack验证, 修改config目录下面的elasticsearch.yml文件,在里面添加如下内容,并重启. xpack.security.enabl ...

  6. 访问需要HTTP Basic Authentication认证的资源的c#的实现 将账号密码放入url

    string url = ""; string usernamePassword = username + ":" + password; HttpWebReq ...

  7. Java对象赋值与引用

    当需要创建多个相同类型的对象且有某些字段的值是相同的,如果直接 get,set 的话,属性多的时候代码会很长,于是乎,以下代码产生了( java 基础差没搞清楚赋值与引用) 复制代码 1 User u ...

  8. TurtleBot3 Waffle （tx2版华夫）（4）笔记本与TX2的通信

    4.1. 使用vnc控制华夫Turbot3-Tx2开发板 1) 电脑端安装vnc viewer,您可以选择应用商城下载安装即可: 2) 下载后打开,键入Turbot3的ip à回车à选择连接: 3)  ...

  9. git基础-远程仓库的使用

    远程仓库的使用 为了能在任意 Git 项目上协作,你需要知道如何管理自己的远程仓库. 远程仓库是指托管在因特网或其他网络中的你的项目的版本库. 你可以有好几个远程仓库,通常有些仓库对你只读,有些则可以 ...

  10. Mirai框架qq机器人教程

    Mirai框架qq机器人教程 0.前言 1. 安装Java 2.安装Mirai启动器 3.下载IDEA或其他编译器 4.创建mirai-console插件项目 4.1 通过git创建 4.2 通过插件 ...