当前位置: 首页 > news >正文

position: absolute;绝对定位水平居中问题

负外边距解决方案
负外边距解决方案远不是仅仅为元素添加负外边距这么简单。这种方法需要同时使用绝对定位和负外边距两种技巧。

下面是该方案的具体实现方法。首先,创建一个包含居中元素的容器,然后将其绝对定位于相对页面左边边缘50%的位置。这样,该容器的左外边距将从页面50%宽度的位置开始算起。

然后,将容器的左外边距值设置为负的容器宽度的一半。这样即可将该容器固定在页面水平方向的中点。
复制内容到剪贴板
代码:

#container {
background: #ffc url(mid.jpg) repeat-y center;
position: absolute;
left: 50%;
width: 980px;
margin-left: -490px;
}

 

#header .mobile-link > img{
    display: none;
    position: absolute;
    left: 50%;
    margin-left: -60px;
}

 

转载于:https://www.cnblogs.com/AndyChen2015/p/7601469.html

相关文章:

  • Java 深复制和浅复制
  • 【highlight.js】页面代码高亮插件
  • mxnet的训练过程——从python到C++
  • Nengo 神经网络
  • Linux正则和grep命令
  • Azure 中 Linux 虚拟机的大小
  • 【bzoj1758】[Wc2010]重建计划
  • ros 如何使用 openni2_launch
  • Git应用实践(二)
  • 软件项目管理第2次作业:豆瓣测评
  • 【个人训练】(POJ1276)Cash Machine
  • [转] logback 常用配置详解(序)logback 简介
  • 网络视频监控与人脸识别
  • 混合和过度绘制(图层性能 15.3)
  • 【u235】背单词
  • [译]前端离线指南(上)
  • [原]深入对比数据科学工具箱:Python和R 非结构化数据的结构化
  • 【笔记】你不知道的JS读书笔记——Promise
  • Apache Spark Streaming 使用实例
  • Docker容器管理
  • gops —— Go 程序诊断分析工具
  • hadoop入门学习教程--DKHadoop完整安装步骤
  • js如何打印object对象
  • node.js
  • python docx文档转html页面
  • storm drpc实例
  • weex踩坑之旅第一弹 ~ 搭建具有入口文件的weex脚手架
  • 浅谈Golang中select的用法
  • 让你成为前端,后端或全栈开发程序员的进阶指南,一门学到老的技术
  • 如何打造100亿SDK累计覆盖量的大数据系统
  • JavaScript 新语法详解:Class 的私有属性与私有方法 ...
  • Java数据解析之JSON
  • ###51单片机学习(2)-----如何通过C语言运用延时函数设计LED流水灯
  • #中国IT界的第一本漂流日记 传递IT正能量# 【分享得“IT漂友”勋章】
  • $forceUpdate()函数
  • (33)STM32——485实验笔记
  • (iPhone/iPad开发)在UIWebView中自定义菜单栏
  • (附源码)springboot“微印象”在线打印预约系统 毕业设计 061642
  • (附源码)springboot太原学院贫困生申请管理系统 毕业设计 101517
  • (九)信息融合方式简介
  • (亲测)设​置​m​y​e​c​l​i​p​s​e​打​开​默​认​工​作​空​间...
  • (转)nsfocus-绿盟科技笔试题目
  • ./indexer: error while loading shared libraries: libmysqlclient.so.18: cannot open shared object fil
  • .NET Core SkiaSharp 替代 System.Drawing.Common 的一些用法
  • .NET/C# 判断某个类是否是泛型类型或泛型接口的子类型
  • .net6Api后台+uniapp导出Excel
  • .NETCORE 开发登录接口MFA谷歌多因子身份验证
  • .Net环境下的缓存技术介绍
  • .xml 下拉列表_RecyclerView嵌套recyclerview实现二级下拉列表,包含自定义IOS对话框...
  • [].slice.call()将类数组转化为真正的数组
  • [AIGC] Spring Interceptor 拦截器详解
  • [BZOJ] 3262: 陌上花开
  • [C#]winform利用seetaface6实现C#人脸检测活体检测口罩检测年龄预测性别判断眼睛状态检测
  • [CareerCup] 14.5 Object Reflection 对象反射
  • [CareerCup] 17.8 Contiguous Sequence with Largest Sum 连续子序列之和最大