css实现垂直居中6种方法
在一次次笔试,一次次的面试中,问到垂直居中的问题太多太多,但是我每一次回答,都好像都不能让面试官太满意,今天特意花点时间,整理一下css垂直居中问题。
1、如果是单行文本。看代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#wrapper{width: 500px;height: 500px;background: gray;}#wrapper p{line-height: 500px;//行高=父级的height,垂直居中。text-align: center;//水平居中}</style>
</head>
<body><div id="wrapper"><p>这是一段要垂直水平居中的文字!</p>
</div></body>
</html>
效果如图:
说明:适用于单行文本,多行就不可以了!
2、对于已知高度的块级元素,可以采用绝对定位。看代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#wrapper{position: relative;//父级width: 500px;height: 500px;background: gray;}#wrapper p{position: absolute;//子级用绝对定位top:50%;//先定位到50%的位置height: 300px;//已知的高度margin-top: -150px;//往上提本身高度的一半}</style>
</head>
<body><div id="wrapper"><p>这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!</p>
</div></body>
</html>
效果如图:
适用:绝对定位为页面布局没有影响的情况下可以使用,并且子级的高度是已知的。
3、对于已知子级元素的高度,而且不能用绝对定位来布局的情况,看代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#wrapper{background: gray;width: 500px;height: 500px;text-align: center;overflow: hidden;}#null{width: 100%;height: 50%;background: yellow;}#content {height: 100px;margin: -50px;}</style>
</head>
<body><div id="wrapper"><div id="null"></div><div id="content">居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~</div>
</div></body>
</html>
效果如图:
适用:对于绝对布局有影响,不能适用position:absolute的元素,可以用以上这种方法,思路是:用一个块级元素,设置已知大小,在让其高度达到父级容器的一半大小,再把要居中的元素往上提半个高度。跟方法2同理。
4、垂直居中一张图片(行内元素)。看代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#wrapper{width: 800px;height: 800px;background: gray;text-align: center;}#wrapper img{vertical-align: middle;}#wrapper #block{background: blue;height: 100%;width: 0;}</style>
</head>
<body><div id="wrapper"><img src="http://img0.bdstatic.com/img/image/2016ss1.jpg" alt=""><img id="block">
</div></body>
</html>
效果如图:
看到这里,细心的同学可能会发现:
这里的多了一个空的<img>标签,为什么要这样的,首先,要搞清楚vertical-align这个属性的特点,它是相对兄弟级行高(line-height)来定位,它是相对兄弟级行高(line-height)来定位,它是相对兄弟级行高(line-height)来定位(重要事情说三遍),并且他仅对行内元素有效,所以,在要定位的元素后面加多一个行内元素img来撑开父级的行高,以此来居中。然后必须强调你一点,记得把后面img的src=""这个空属性去掉,不然会留下一个空白框。如图:
然后,有些同学可能会有疑问,行内元素那么多。为什么你要用<img>标签呢!?
嗯嗯,也可以用其他行内元素,这里我用<span>来试一试给大家看:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#wrapper{width: 800px;height: 800px;background: gray;text-align: center;}#wrapper img{vertical-align: middle;}#wrapper #block{background: blue;line-height: 800px;//跟父级一样高}</style>
</head>
<body><div id="wrapper"><img src="http://img0.bdstatic.com/img/image/2016ss1.jpg" alt=""><span id="block"></span>
</div></body>
</html>
这样的效果是一样的,记得哦,在这里不可以用line-height:100%这样来设置行高,详情可以查看我的另外一个博客“line-height:150%和line-height:1.5的区别”,了解一下line-height用百分比的特性。
适用:通用行内元素。
5、子父级都未知高度的块级元素居中,看代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#wrapper{display: table;background: gray;width: 500px;height: 500px;text-align: center;}#content {display: table-cell;vertical-align: middle;}</style>
</head>
<body><div id="wrapper"><div id="content">居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~</div>
</div></body>
</html>
效果如图:
适用:低版本的IE67不兼容,还有就是即便父级overflow:hidden,随着文本的增加,溢出的文本依旧不会隐藏,适用于少文字或者静态文字。
6、绝对定位居中法,看代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#wrapper{position: relative;background: gray;width: 800px;height: 800px; }#content {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin:auto;}</style>
</head>
<body><div id="wrapper"><img id="content" src="http://img0.bdstatic.com/img/image/2016ss1.jpg" alt="">
</div></body>
</html>
效果如图:
首先,先感谢一下评论下方的@ 唯利是图 园友,感谢他的提醒。我尝试了这种绝对定位的方法,果然很好用。但是其原理是什么呢?
在这里,我先说一下这种定位方法的优点,可以无视被居中元素的宽度和高度,从而实现绝对定位的居中。我们来看看里面的代码,
这是什么意思呢?
其实就是将元素未知的宽度高度的元素,使其让它的top,bottom,left,right,都与父级的距离为零,如果其元素宽高不够的,就会用margin:auto去填充其大小。
从而实现了居中。
(这是本人的粗略理解,不一定准确!)
文章说明:个人查看各种资料,原创所得,观点不一定准确,欢迎各路大牛勘误,小女子感激不尽。
转载于:https://www.cnblogs.com/Yirannnnnn/p/4933332.html
css实现垂直居中6种方法相关推荐
- web前端-01:关于css居中的几种方法
web前端-01:关于css居中的几种方法 在学习web前端的过程中,居中问题应该算得上是个比较经典的问题了吧,关于居中的方法也有很多,总结一下我自己比较喜欢用的几个方法. 1 利用 ...
- css水平垂直居中四种常用方式
css水平垂直居中 第一种:flex布局水平垂直居中 思路: 给父盒子display属性设置flex值,然后使用justify-content与align-item属性进行居中. 参考:阮一峰的fle ...
- html如何引入css文件?HTML引入外部css文件的四种方法
在学习前端的时候,我们应该知道css给html标记添加各种样式,用来告诉浏览器,因该如何显示这些标记里面的内容.既然css是用来给html添加各种样式的,那么,html中如何引入外部的css文呢?本篇 ...
- HTML中写CSS代码的两种方法
在HTML中写CSS代码也两种方法. 写在HTML标签里 使用CSS前 <h1>这是一个标题 </h1> 使用CSS后 <h1 style="color:red ...
- JS行间改变css的方法,js改变css样式的三种方法推荐
共用代码: this is a div var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:25 ...
- html设置盒子水平垂直居中,盒子水平垂直居中10种方法
盒子水平垂直居中10种方法 HTML代码 第一种:通过绝对定位的方式 absolute + 负margin 首先知道子元素的宽高,给子元素设置top:50%:left:50%, 但绝对定位是基于子元素 ...
- css如何设置文本垂直居中显示,css中怎么设置文本居中?css文本垂直居中的设置方法...
在网页设计的过程中,有时候可能为了布局美观可能需要让文本居中,那么,怎么设置文本居中呢?本篇文章将给大家介绍关于css设置文本垂直居中的方法. 首先我们要知道通过css实现元素的水平居中较为简单:对文 ...
- js修改style中某个属性_JS 和 CSS 交互的 5 种方法
英文 | https://davidwalsh.name/ways-css-javascript-interact译文 | https://www.webhek.com/post/ways-css-j ...
- html盒子居中的方式,CSS盒子居中三种方法
前言 CSS盒子居中,我觉得是很有必要学习一下的.特别是第三种方法,奇淫技巧升级版,也是生产环境中非常常见的一种方法,不需要知道宽度,随着祖先元素的变化而变化! 1.常规方法 常规方法只需要给盒子设置 ...
- 纯css实现手风琴效果_创建纯CSS手风琴的4种方法
内容手风琴是一种有用的设计模式. 您可以将它们用于许多不同的事物:用于菜单,列表,图像,文章摘录,文本片段甚至视频 那里的大多数手风琴都依赖JavaScript,主要是jQuery ,但是由于高级CS ...
最新文章
- linux x window system下载,为Ubuntu 添加 KDE X WINDOW SYSTEM
- 【linux操作回炉1】
- 在unity调用WebService的接口方法
- win2008下的无线网卡设置
- 初识MASA Blazor
- 马踏棋盘算法(骑士周游)+贪心优化
- sql 注射_令人惊讶的注射
- apache图片cache容量_apache利用mod_cache缓存图片等
- [html] iframe可以使用父页面中的资源吗(如:css、js等)?
- ajax提交数据遇到400异常,原因及解决方案
- 天大 ACM 1090. City hall
- 【面经】算法岗面试复盘:阿里,百度,作业帮,华为
- 万能打印之Delphi 2010实现(完结)
- 计算机制作ppt教程,电脑制作ppt详细步骤_新手制作ppt详细步骤图文教程
- 推荐微信小程序常用的几个UI组
- 局域网之间两台计算机同屏,如何实现内网多电脑同屏协同?
- SQL在执行JOIN ON时,到底发生了什么?
- 微信公众平台针对iBeacon 增加摇一摇周边功能
- 多项式插值中的一些定理证明
- java实现生成二维码