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元素在一条 ...
随机推荐
- windows下的两个等待函数
windows下的两个等待技术 第一种: Win32 Sleep()函数 这个函数要求操作系统中止线程动作.直到读过某个指定的时间之后才恢复.能在某个线程结束时(而不是某段时间结束时)被调 ...
- showModalDialog参数问题
showModalDialog传递参数: 1.参数拼接放在url中,参数过长或带特殊字符时,容易出现问题. 2.参数放在showModalDialog属性里 <script type=" ...
- centos7 配置虚拟交换机（物理交换机truckport设置）（使用brctl）
感谢朋友支持本博客.欢迎共同探讨交流,因为能力和时间有限.错误之处在所难免,欢迎指正! 假设转载,请保留作者信息. 博客地址:http://blog.csdn.net/qq_21398167 原博文地 ...
- leetcode 656. Coin Path
Given an array A (index starts at 1) consisting of N integers: A1, A2, ..., AN and an integer B. The ...
- HDU1754 —— I Hate It 线段树 单点修改及区间最大值
题目链接:https://vjudge.net/problem/HDU-1754 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少. 这让很多学生很反感. 不管你喜不喜 ...
- 使用C#开发HTTP服务器系列之实现Get和Post
各位朋友大家好,我是秦元培,欢迎大家关注我的博客,我的博客地址是http://qinyuanpei.com.在我们这个Web服务器有了一个基本的门面以后,我们是时候来用它做点实际的事情了.还记得我们 ...
- SimpliciTI协议栈
SimpliciTI组网过程介绍 1.SimpliciTI支持点对点和星形的网络拓扑结构. 下面介绍以AP为中心的SimpliciTI网路协议的星形拓扑结构通信过程 1)当ED节点上电之后就扫描信 ...
- coderfoces446c (斐波那契数列)
题目描述: 区间增值,但是每一项增加的值为Fi - l + 1,F[i]为斐波那契数列,求区间和? 考虑线段树,刚开始想用斐波那契数列的前n项和,可是推不出来,考虑到每个区间的增值序列都是一段斐波那契 ...
- eoj 3507 坑爹的售票机
EOJ 3507 坑爹的售票机 问题描述 oxx 和 xjj 决定和小伙伴们一同坐船前往 Xiamen.去 Xiamen 的船票一张 p 元. 当他们满怀兴致地来到港口时发现居然只有不设找零的自动 ...
- Gym 100512F Funny Game (博弈+数论)
题意:给两个数 n,m,让你把它们分成 全是1,每次操作只能分成几份相等的,求哪一个分的次数最多. 析:很明显,每次都除以最小的约数是最优的. 代码如下: #pragma comment(linker ...