CSS绝对定位元素居中的几种方法
转载自-CSS居中绝对https://www.cnblogs.com/skura23/p/6530556.html
作者:PajamaCat
1,div宽度未知1
<body>
<div style="position: absolute; left: 50%;">
<div style="position: relative; left: -50%; border: dotted red 1px;">
没有宽度<br />
照样居中,嘿嘿嘿
</div>
</div>
</body>
demo:https://jsfiddle.net/skura23/0123wmsg/
2,div宽度未知2
<div class="outer">
<div class="inner">居中<br/>蓄力中</div>
</div> .outer {
position: relative; /* or absolute */ /* unnecessary styling properties */
margin: 5%;
width: 80%;
height: 500px;
border: 1px solid red;
} .inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /* unnecessary styling properties */
max-width: 50%;
text-align: center;
border: 1px solid blue;
}
demo:http://jsfiddle.net/skura23/6xo11zwv/210/
ps:此方法适合ie8以上的浏览器
3,div宽度已知
<body>
<div>
<div id="content">
居中蓄力中
</div>
</div>
</body> #content {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 100px; /* 要设定宽度 */
}
CSS绝对定位元素居中的几种方法的更多相关文章
- 使用CSS完成元素居中的七种方法
在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...
- 网页元素居中的n种方法
导语:元素居中对齐在很多场景看上去很和谐很漂亮.除此之外,对于前端开发面试者的基础也是很好的一个考察点.下面跟着作者的思路,一起来看下吧. 场景分析 一个元素,它有可能有背景,那我要它的背景居中对齐 ...
- css中元素水平垂直居中4种方法介绍
table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...
- 【前端】使用CSS使元素居中的几种方式
Precondition: <div class="parent"> <div class="item">居中</div> ...
- css一个元素垂直居中的6种方法
方法一: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- 元素居中的两种方法,transform和margin
1.transform :translate(-50%,-50%) <!DOCTYPE html> <html lang="en"> <head> ...
- css绝对定位元素实现居中的几个方法
一:CSS绝对定位元素left设为50%实现水平居中 绝对定位的元素left设为50%时,是已左上角为原点的,所以只要再使用margin属性添加负值补偿回来即可.示例:[css]代码如下: #boar ...
- css如何实现垂直居中(5种方法)
css如何实现垂直居中(5种方法) 一.总结 一句话总结:行内只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了. 块的话可以尝试 margin:auto: ...
- css实现垂直水平居中的5种方法
css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; borde ...
随机推荐
- JVM上的响应式流 — Reactor简介
强烈建议先阅读下JVM平台上的响应式流(Reactive Streams)规范,如果没读过的话. 官方文档:https://projectreactor.io/. 响应式编程 作为响应式编程方向上的第 ...
- React引领未来用户界面——心莱科技内部直播分享会
视频地址(请点开链接观看视频)https://v.qq.com/x/page/l08427ukdjo.html 本周,心莱科技在公司内部就开展了一场前端技术分享会,使用了直播模式进行分享,主要分享关于 ...
- C# Lambda表达式和linq表达式 之 匿名对象查询接收
很多小伙伴都用过Lambda表达式和linq表达式,用起来也得心应手,但是有的小伙伴 对匿名对象的查询与接收比较迷茫,(没有定义相应的实体),怎么在where()里面进行 条件筛选呢?常规用法我就不说 ...
- RequireJS入门级_RequireJS能给我们带来什么帮助?
前言:其实很早前就已经接触和了解到RequireJS了,当时只是大概明白它能用来控制JS的加载顺序,即:页面一定要先加载这个JS,再加载那个JS,对于RequireJS的好处还没有一个真正的体会和认识 ...
- jQuery获取或设置元素的宽度和高度
jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...
- Spring Boot 自定义 starter
一.简介 SpringBoot 最强大的功能就是把我们常用的场景抽取成了一个个starter(场景启动器),我们通过引入springboot 为我提供的这些场景启动器,我们再进行少量的配置就能使用相应 ...
- Java建造者模式
建造者模式 建造者模式适用场景: 建造一个复杂的对象适用,将构建对象的过程分开,每个类单独构造对象的一部分,最后组装起来,返回我们需要的对象. 下面的例子主要讲解构造一个飞船 Demo: //要获得的 ...
- Yii2设计模式——Yii2中用到哪些设计模式?
"Yii2设计模式"包含了两个方面的内容:1.设计模式,2.Yii2框架. <设计模式>一书虽然以JAVA语言来表达设计模式的思想,但是设计模式远不限制于某一种特定的语 ...
- JQuery拖拽元素改变大小尺寸
<!DOCTYPE html><html> <head> <title></title> <style type="text ...
- ES6基础
一.新增命令let/const ①:let命令 1.let命令用来声明变量,它的用法类似于var,但是所声明的变量只在let命令所在的代码块内生效. 所以在for循环中,就很适合使用let命令. 上面 ...