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元素在一条 ...
随机推荐
- 【iOS9系列】- CoreSportlight内容索引的使用
[iOS9系列]- CoreSportlight内容索引的使用 前言 在iOS9中新增加了的CoreSportlight内容索引,这个还是比较实用的,当我们的App比较多的时候,我们会实用iOS系统的 ...
- CodeChef - CHEFPRAD Chef and Pairs 树形DP
题意 给你一棵由 N 个节点构成的树 T.节点按照 1 到 N 编号,每个节点要么是白色,要么是黑色.有 Q 组询问,每组询问形如 (s, b).你需要检查是否存在一个连通子图,其大小恰好是 s,并 ...
- C 项目案例实践（1）数据结构之链表（0）
链表是通过一组任意的存储单元来存储线性表中的数据元素的,那么怎样表示出数据元素之间的线性关系呢?为建立数据元素之间的线性关系,对每个数据元素ai,除了存放数据元素的自身信息ai之外,还需要存放和ai一 ...
- linux kernel编译配置相关
1 配置界面的搜索功能 “/”可以进行模块搜索,搜索结果里面还有依赖信息.非常方便. 2 在使用纯内核,不实用module的时候,很多情况下出错是因为相应的特性为编译进内核 案例一: 块设备已经发现了 ...
- Flame Graphs
http://www.brendangregg.com/flamegraphs.html Flame graphs are a visualization of profiled software, ...
- （2）MyEclipse怎么关联本地Tomcat服务器
1,在MyEclipse中点击服务器按钮: 2,选择“Configure Server” 3,在弹出面板中选择 [Servers]-[Tomcat]-[对应版本的服务器] 5,看上图,先选择Enabl ...
- YTU 2902: H-Sum 3s
2902: H-Sum 3s 时间限制: 1 Sec 内存限制: 128 MB 提交: 139 解决: 28 题目描述 You are given a number sequence a1,a2, ...
- C++ 多线程与并发
1. 非原子操作 这些非原子操作在被编译为汇编代码后不止一条指令. 自加.自减少: new 关键字: 申请内存: 调用构造函数: pInst = new T; // 对于这样一个赋值语句,更是包含了如 ...
- 并不对劲的splay
splay和不加任何旋转一定会被卡的二叉搜索树的唯一区别就是每次操作把当前节点旋转到根. 旋转有各种zig.zag的组合方式,感觉很麻烦,并不对劲的人并不想讲. 其实可以找出一些共性将它们合并.设ls ...
- js追加子元素
在页面加载完毕后,向div元素追加span子元素 <html><head><title>js</title><script type=" ...