最近看到一个问题就是让绝对定位的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#访问Access数据库提示未安装ISAM

    解决办法 1.在前面加上Jet OLEDB:,如: Jet OLEDB:Database Password='zt' <add name="ConStrOleDb" conn ...

  2. springboot项目中使用jsp

    在pom文件中 1.方法一 <!-- 引入tomcate内嵌的jsp解析包--> <dependency> <groupId>org.apache.tomcat.e ...

  3. hive中笛卡尔积的优化

    由于一个业务,必须要进行笛卡尔积,但是速度太慢了,left join时左表大概4万条数据,右表大概 3000多条数据,这样大概就是一亿多条数据, 这在大数据领域其实不算很大的数据量,但是hive中跑的 ...

  4. stm32之can总线过滤器研究

    stm32的can总线的配置如下:       CAN_InitStructure.CAN_TTCM=DISABLE;//禁止时间触发通信模式      CAN_InitStructure.CAN_A ...

  5. std::thread线程详解（1）

    目录 目录 简介 线程的使用 线程的创建 线程的方法和属性 std::jthread (C++20) stop_token (C++20) 总结 Ref 简介 本文主要介绍了标准库中的线程部分.线程是 ...

  6. 多线程那点事—Parallel.for

    先看段代码: 1 for (int i = 0; i < 10; i++) 2 { 3 Task.Factory.StartNew(()=>Console.WriteLine($" ...

  7. 探讨EFCore如何优雅的实现读写分离

    前言     我们都知道当单库系统遇到性能瓶颈时,读写分离是首要优化手段之一.因为绝大多数系统读的比例远高于写的比例,并且大量耗时的读操作容易引起锁表导致无发写入数据,这时读写分离就更加重要了.   ...

  8. 2020DevOps状态报告——变更管理

    如果你的公司还没有走向平台化,现在仍然可以是很大的飞跃.您仍然可以通过解决公司的变更管理流程来加快软件交付.在本章中,我们将研究我们在公司内部所学的变更管理模式.我们将向您展示什么是有效的,什么是无效 ...

  9. 9. 细节见真章，Formatter注册中心的设计很讨巧

    目录 本文提纲 版本约定 你好,我是A哥(YourBatman). Spring设计了org.springframework.format.Formatter格式化器接口抽象,对格式化器进行了大一统, ...

  10. Sentry(v20.12.1) K8S 云原生架构探索，SENTRY FOR JAVASCRIPT 故障排除

    系列 Sentry-Go SDK 中文实践指南 一起来刷 Sentry For Go 官方文档之 Enriching Events Snuba:Sentry 新的搜索基础设施(基于 ClickHous ...