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元素在一条 ...
随机推荐
- JS表格分页组件：fupage的设计思路和详细使用方法(未来考虑开源,争取在2015年）
一.背景 之前在秒针工作的时候,某js高级project师写了非常多自己的组件.当中一套是分页组件.叫做st-grid. 只是在我看来,bug太多.我常常给他反馈bug,我也不清楚为啥 ...
- Android不刷机下的app2sd方法(dex cache占空间解决篇)
抱着5年的HTC G7这个古董,一直没有想法去换换. 近期微信.支付宝什么的apk应用都開始走程序巨型化,一次性就来个50MB的空间占用,让还是Android 2.2的手机怎样吃的消? 看看100多M ...
- sizeof、strlen
一.sizeof sizeof(...)是运算符,sizeof操作符的结果类型是size_t.它在头文件里typedef为unsigned int类型.是以字节为单位进行计数的.所以位域成员不 能用s ...
- MVC+ZTree大数据异步树加载
实例部分: 首先是为ZTree提供的数据规范,定义一个标准的接口,这样对于前台调用是清楚的,简单的,因为它返回的JSON数据将与ZTree默认的数据元素保持一致 /// <summary> ...
- 2016/3/13 MySQL 增删查改 CRUD 用代码实现
用代码实现数据库数据输入 T-SQL语句 查询语句分几块 ①创建表 create table Car (Code varchar(50) primary key, #primary key 主键 定义 ...
- 为Windows Live Writer添加Code插件
1.插件效果展示 1: void CDemoDlg::OnBnClickedNmdlg() 2: { 3: CNonModeDlg *pDlg = new CNonModeDlg();// 创建一个C ...
- mktemp temp race attack 临时文件隐患
/tmp 安全隐患 -/tmp 在家目录 程序目录下 创建 临时文件
- （6）servlet-创建一个servlet类
1,在项目的src目录下,右键[New]-[Servlet] 2,在弹出窗口中填写信息 Package:所在包名 Name:servlet的类名 Which method stubs would yo ...
- Lightoj 1005 Rooks(DP)
A rook is a piece used in the game of chess which is played on a board of square grids. A rook can o ...
- YTU 2916: Shape系列-2
2916: Shape系列-2 时间限制: 1 Sec 内存限制: 128 MB 提交: 268 解决: 242 题目描述 小聪不喜欢小强的Shape类,声称用Shape类做出的形状不真实,于是小 ...