[CSS] position:absolute水平居中

最近听了周杰伦的《不爱我就拉倒》，感觉周董现在写歌有点任性，反正我就是要这样写，你们爱听不听。好吧，好吧，有才真的是可以为所欲为。不过，周董应该是少量的一些硬核的歌手，很多歌词都是拳拳到肉，不像大部分歌手的歌那样，一顿呻吟。。。说了一堆废话（//▽//）

言归正传，对于设置了position:absolute的元素怎么设置水平居中。

1
__
最开始的时候一直用了比较蠢的方法，在元素外部套一层div,对外部的div设置绝对定位，然后在设置里面的元素margin:0 auto。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<style>#root{width: 100%;height: 100px;position: relative;}.container{width: 100%;height: auto;position: absolute;left: 0;top: 40px;}.block{height: 20px;width: 30px;position: relative;margin: 0 auto;}
</style>
<body><div id="root"><div class="container"><div class="block"></div></div></div>
</body>
</html>

这种方法其实也不能算是很蠢，虽然多套了一层DOM，但是相对下一种方法来说，这个方法可以适应可变的宽度。

2
__
第二种方法是配合使用left和margin的方法。将left设置为50%，margin-left设置为-width/2，缺点也是显而易见的，需要确切知道元素的宽度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<style>#root{width: 100%;height: 100px;position: relative;background: #eee;}.block{height: 40px;width: 200px;position: absolute;left: 50%;background: #555;}
</style>
<body><div id="root"><div class="block"></div></div>
</body>
</html>

3
__
第三种方法，是将left和right同时设置为0，并且设置margin:0 auto,原理至今没搞懂，还是从别人的代码里学过来的，很少用。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<style>#root{width: 100%;height: 100px;position: relative;background: #eee;}.block{height: 40px;width: 200px;position: absolute;left: 0;right:0;margin: 0 auto;background: #555;}
</style>
<body><div id="root"><div class="block"></div></div>
</body>
</html>

https://www.doctype.com.cn/archives/118/

[CSS] position:absolute水平居中相关推荐

css position:absolute 居中
css position:absolute 居中父级 div div{position: relative;} 自己 div div{position: absolute;left: 50%;top ...
css position的父级,css position absolute 相对于父元素的设置方式
大家知道css的position absolute默认是根据document来设置的,比如position:absolute后设置left:0;top:0这时候元素会显示到页面的左上角. 有时候我们需 ...
css position:absolute 父元素高度塌陷
问题在使用iSroll v4插件时,无法滚动到底部,从源码得知最大滚动位置由maxScrollY决定.从源码摘录出计算maxScrollY的部分 that.wrapperH = that.wrapp ...
CSS position: absolute 绝对定位精讲
本文要点 1. 绝对定位元素文档流: 2. 绝对定位元素定位参照对象: 3. 绝对定位元素的自动伸缩: 4. 绝对定位元素实现垂直居中: 绝对定位基本特征绝对定位的第一个特征在于会从文档流中脱离,不 ...
position:absolute水平居中
position: absolute; left: 0; right:0; margin: 0 auto;
css position:absolute 如何居中对齐
要写死宽度,就好弄了 position: absolute; left: 50%; width: 980px; margin-left: -490px; text-algin:center
css -- position : absolute 在不同的浏览器位置不同
注:自己遇到的一个css小问题. 测试工具:css .火狐浏览器 .谷歌浏览器 .极速谷歌浏览器问题:div中某标签使用绝对定位后在火狐.谷歌和极速谷歌中显示位置不同. 解决:在div中添加相对定位 ...
Absolute 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
Ⅰ.绝对定位居中(Absolute Centering)技术我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中--实际上,实现垂直居中仅需要声明元素 ...
CSS position属性absolute relative等五个值的解释
目前几乎所有主流的浏览器都支持position属性("inherit"除外,"inherit"不支持所有包括IE8和之前版本IE浏览器,IE9.IE10还没测试 ...

[CSS] position:absolute水平居中

[CSS] position:absolute水平居中相关推荐

最新文章

热门文章