absolute元素水平居中
原始（未居中）：
.con{
width:200px;
height:200px;
background:#ccc;
position:relative;
}
.abs{
width:40px;
height:20px;
background:steelblue;
position:absolute;
bottom:;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="con">
<div class="abs"></div>
</div>
</body>
</html>
Solution 1：
给absolute元素的left设为50%, margin-left设为absolute元素宽度一半的负数
.con{
width:200px;
height:200px;
background:#ccc;
position:relative;
}
.abs{
width:40px;
height:20px;
background:steelblue;
position:absolute;
bottom:;
left:50%;
margin-left:-20px;
}
Solution 2：
原理和1相似，设left：50%，但使用css3的transform：translate(x,y);
.con{
width:200px;
height:200px;
background:#ccc;
position:relative;
}
.abs{
width:40px;
height:20px;
background:steelblue;
position:absolute;
bottom:;
left:50%;
transform:translate(-50%);
}
Solution 3：
margin:auto;实现居中,但是absolute元素一定要有宽度，并且如果宽度不合适（常见于ul li）也是不会居中的
.con{
width:200px;
height:200px;
background:#ccc;
position:relative;
}
.abs{
width:40px;
height:20px;
background:steelblue;
position:absolute;
bottom:;
left:;
right:;
margin:0 auto;
}
absolute元素水平居中的更多相关文章
- css确定元素水平居中和垂直居中
---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当 ...
- CSS/CSS3 如何实现元素水平居中
更新:可直接访问 [CSS/CSS3 如何实现元素水平居中] 查看效果,右键查看源代码 -------------------------------------------------分割线---- ...
- position: absolute;绝对定位水平居中问题
position: absolute;绝对定位水平居中问题 用CSS让元素居中显示并不是件很简单的事情—同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋.让我们先来看一下CSS中常见的几种让 ...
- absolute元素 text-align属性
text-align属性的元素可以有效作用于inline/inline-block水平的子元素,但是,text-align属性对应用了position:absloute/fixed声明的元素无效! ...
- css点滴2—六种方式实现元素水平居中
本文参考文章<六种方式实现元素水平居中> 元素水平居中的方法,最常见的莫过于给元素一个显式的宽度,然后加上margin的左右值为auto.这种方式给固定宽度的元素设置居中是最方便不过的.但 ...
- 【css系列】六种实现元素水平居中方法
一.前言 居中效果在CSS中很是普通的效果,平时大家所看到的居中效果主要分为三大类:水平居中.垂直居中和水平垂直居中.而其中水平居中相对于后两者来说要简单得多.使用了css3的flexbox的属性轻松 ...
- CSS布局：元素水平居中
CSS布局之元素水平居中 本文将依次介绍在不同条件下实现水平居中多种方法 一.使用 text-align: center : 适用于块级元素内部的行内元素水平居中(也适用于图片的水平居中) 此方法对i ...
- css让浮动元素水平居中
对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中. 对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题.如下: HTML 代码: <div class=&q ...
- 祖先元素transform非none时在Iphone6上引起后代fixed/absolute元素的怪异表现及解决方案
如题,祖先元素transform非none时,记录一下Iphone6中引起后代元素fixed参考视图怪异表现和解决方案. 层叠关系及参考视图 层叠上下文是HTML元素的三维概念,这些HTML元素在一条 ...
随机推荐
- [Spring实战系列]（19）Servlet不同版本号之间的差别
1. 2.3版本号 2.3版本号 <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application ...
- 深度学习笔记之关于总结、展望、参考文献和Deep Learning学习资源（五）
不多说,直接上干货! 十.总结与展望 1)Deep learning总结 深度学习是关于自动学习要建模的数据的潜在(隐含)分布的多层(复杂)表达的算法.换句话来说,深度学习算法自动的提取分类需要的低层 ...
- QuickFont使用中的3D物体消失问题
使用基于OpenTK的QuickFont显示字体的时候,会遇到绘制的3D物体消失的问题. 搜索OpenTK的论坛后,解决办法如下: 在执行QFont.End()语句后,再后面添加GL.Disable( ...
- apache使用总结
由于某些原因,经常会使用apache(有时用nginx) 现在我主要用它做反向代理,偶尔弄一下负载均衡和添加head头 apache官网 http://httpd.apache.org/ 下载地址 h ...
- 在Eclipse中tomcat 内存配置
修改1: 在Eclipse中下面Servers双击Tomcat Server... 然后点击General InformAtion 下的Open launch configuration: 会弹出Ed ...
- HDU2121 Ice_cream’s world II —— 最小树形图 + 不定根 + 超级点
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2121 Ice_cream’s world II Time Limit: 3000/1000 MS (J ...
- 【转】WdatePicker.js的使用方法 帮助文档 使用说明 如何使用
[转]WdatePicker.js的使用方法 帮助文档 使用说明 如何使用 日期控件支持平面显示功能,只要设置一下eCont属性就可以把它当作日历来使用了,无需触发条件,直接显示在页面上 示例2-1 ...
- jquery a
<!DOCTYPE html><html><head><script src="//ajax.googleapis.com/ajax/libs/jq ...
- windows系统修改mysql端口的方法
1.首先在控制面板--管理工具--服务里停止mysql服务
- JVM垃圾回收面试题
Java垃圾回收有个经典面试题,什么时候,对什么对象,做了什么操作? 垃圾回收里涉及内容很多,要准确回答这个问题首先要先限定边界.分清楚虚拟机规范定义和不同虚拟机实现的差异.以工作中用到的hotspo ...