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元素在一条 ...
随机推荐
- 下载Youku视频观看
所需工具: 1.chorme内核浏览器,如Chorme.Firefox等等 2.vlc视频播放器 准备工作完成,开始工作 1.打开优酷的随便一个视频 2.按下F12选择Network(网络)选择Med ...
- 2016/3/26 连接数据库 网页中数据的增删改 add delete update addchuli updateChuLi test8 DBDA
主页面 test8.php <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- MySQL服务无法启动(1067)问题
关于这个问题网上的帖子和说法多如牛毛,是在难以分辨真假,或者是否与自己的出错情况相同. 有了前车之鉴,就有必要提前声明,这篇是我在计算机--管理--服务中启动mysql服务时出现的错误,如下: 最后的 ...
- Deep Learning 29: caffe入门学习
1.跑教程:深度学习(六)caffe入门学习,上面有比较好的注释 .prototxt文件:网络结构文件 solver.prototxt:网络求解文件 net: "examples/mnist ...
- 移动端和PC端有什么区别
1.PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器使用的都是webkit内核,所以说做移动端开发,更多考虑的应该是手机分辨 ...
- Linux文件锁【转】
本文转载自:http://blog.csdn.net/dragon_li_chen/article/details/17147911 一.文件锁的分类: 翻阅参考资料,你会发现文件锁可以进行很多的分类 ...
- 并不对劲的bzoj4868: [Shoi2017]期末考试
传送门-> 三分裸题. 发现答案只和最后一个科目公布成绩的时间有关. 科目公布成绩的时间越早,老师们的不愉快度越高,这个时间越晚,学生们的不愉快度越高. 它看上去像个单峰的,那么就三分好了. 判 ...
- 基于COCHONUT做和弦识别
论文为:COCHONUT: Recognizing Complex Chords From MIDI Guitar Sequences 出处:international symposium/confe ...
- 洛谷 P1083 借教室【二分+差分/线段树】
二分mid,然后用1~mid的操作在差分序列上加减,最后把差分序列前缀和起来,看是否有有超过初始r值的 #include<iostream> #include<cstdio> ...
- bzoj 4820: [Sdoi2017]硬币游戏【kmp+高斯消元】
有点神,按照1444的做法肯定会挂 注意到它的概率是相同的,所以可以简化状态 详见http://www.cnblogs.com/candy99/p/6701221.html https://www.c ...