css设置按钮竖直方向居中_css实现垂直居中6种方法
在一次次笔试,一次次的面试中,问到垂直居中的问题太多太多,但是我每一次回答,都好像都不能让面试官太满意,今天特意花点时间,整理一下css垂直居中问题。
1、如果是单行文本。看代码:
Document
#wrapper{
width: 500px;
height: 500px;
background: gray;
}
#wrapper p{
line-height: 500px;//行高=父级的height,垂直居中。
text-align: center;//水平居中
}
这是一段要垂直水平居中的文字!
效果如图:
说明:适用于单行文本,多行就不可以了!
2、对于已知高度的块级元素,可以采用绝对定位。看代码:
Document
#wrapper{
position: relative;//父级
width: 500px;
height: 500px;
background: gray;
}
#wrapper p{
position: absolute;//子级用绝对定位
top:50%;//先定位到50%的位置
height: 300px;//已知的高度
margin-top: -150px;//往上提本身高度的一半
}
这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!这是一段要垂直水平居中的文字!
效果如图:
适用:绝对定位为页面布局没有影响的情况下可以使用,并且子级的高度是已知的。
3、对于已知子级元素的高度,而且不能用绝对定位来布局的情况,看代码:
Document
#wrapper{
background: gray;
width: 500px;
height: 500px;
text-align: center;
overflow: hidden;
}
#null{
width: 100%;
height: 50%;
background: yellow;
}
#content {
height: 100px;
margin: -50px;
}
效果如图:
适用:对于绝对布局有影响,不能适用position:absolute的元素,可以用以上这种方法,思路是:用一个块级元素,设置已知大小,在让其高度达到父级容器的一半大小,再把要居中的元素往上提半个高度。跟方法2同理。
4、垂直居中一张图片(行内元素)。看代码:
Document
#wrapper{
width: 800px;
height: 800px;
background: gray;
text-align: center;
}
#wrapper img{
vertical-align: middle;
}
#wrapper #block{
background: blue;
height: 100%;
width: 0;
}
效果如图:
看到这里,细心的同学可能会发现:
这里的多了一个空的标签,为什么要这样的,首先,要搞清楚vertical-align这个属性的特点,它是相对兄弟级行高(line-height)来定位,它是相对兄弟级行高(line-height)来定位,它是相对兄弟级行高(line-height)来定位(重要事情说三遍),并且他仅对行内元素有效,所以,在要定位的元素后面加多一个行内元素img来撑开父级的行高,以此来居中。然后必须强调你一点,记得把后面img的src=""这个空属性去掉,不然会留下一个空白框。如图:
然后,有些同学可能会有疑问,行内元素那么多。为什么你要用标签呢!?
嗯嗯,也可以用其他行内元素,这里我用来试一试给大家看:
Document
#wrapper{
width: 800px;
height: 800px;
background: gray;
text-align: center;
}
#wrapper img{
vertical-align: middle;
}
#wrapper #block{
background: blue;
line-height: 800px;//跟父级一样高
}
这样的效果是一样的,记得哦,在这里不可以用line-height:100%这样来设置行高,详情可以查看我的另外一个博客“line-height:150%和line-height:1.5的区别”,了解一下line-height用百分比的特性。
适用:通用行内元素。
5、子父级都未知高度的块级元素居中,看代码:
Document
#wrapper{
display: table;
background: gray;
width: 500px;
height: 500px;
text-align: center;
}
#content {
display: table-cell;
vertical-align: middle;
}
效果如图:
适用:低版本的IE67不兼容,还有就是即便父级overflow:hidden,随着文本的增加,溢出的文本依旧不会隐藏,适用于少文字或者静态文字。
6、绝对定位居中法,看代码:
Document
#wrapper{
position: relative;
background: gray;
width: 800px;
height: 800px;
}
#content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin:auto;
}
效果如图:
首先,先感谢一下评论下方的@ 唯利是图 园友,感谢他的提醒。我尝试了这种绝对定位的方法,果然很好用。但是其原理是什么呢?
在这里,我先说一下这种定位方法的优点,可以无视被居中元素的宽度和高度,从而实现绝对定位的居中。我们来看看里面的代码,
这是什么意思呢?
其实就是将元素未知的宽度高度的元素,使其让它的top,bottom,left,right,都与父级的距离为零,如果其元素宽高不够的,就会用margin:auto去填充其大小。
从而实现了居中。
(这是本人的粗略理解,不一定准确!)
文章说明:个人查看各种资料,原创所得,观点不一定准确,欢迎各路大牛勘误,小女子感激不尽。
css设置按钮竖直方向居中_css实现垂直居中6种方法相关推荐
- css设置按钮竖直方向居中_前端设计师必须知道的10个重要的CSS技巧
对于一个初入门的前端设计师,在设计修改网站前端的时候,我们需要编写一些CSS.JS的内容达到界面效果.今天分享10个对于前端设计师来说重要的CSS技巧,这也是我在给许多客户做网站的过程当中总结出来的. ...
- css设置按钮竖直方向居中_如何借助伪元素实现垂直居中?
点击右上方红色按钮关注"小郑搞码事",每天都能学到知识,搞懂一个问题! 今天给大家讲一种实现垂直居中的方法:伪元素法(::before/::after) 一.vertical-al ...
- css设置按钮竖直方向居中_button内flex垂直居中竟然不居中的解决
问题描述 按钮样式为图标+文字,在使用flex布局写垂直居中时,iphone7手机上文字和图标却没有居中,居左显示.代码如下(已精简): {{ confirmButtonText }} ... but ...
- CSS | DIV 水平和竖直方向居中
1.竖直方向: 最近做个小页面遇到了点麻烦:需要设置元素的竖直方向居中. 以往的经验: display: inline-block; vertical-align: middle; 就可以解决.但是这 ...
- 小程序中align-items: center竖直方向居中失败解决办法
垂直居中失败现象 可以看到我在CSS中设置了水平和垂直居中,但是显示出来并没有效果 CSS中代码 .Nav_text{display: flex;align-items: center;justify ...
- 【LaTeX应用】画图,上面一个图形,下面两个图形,竖直方向居中
如图所示,在上面有一个矩形框,下面两个矩形框,如何让上面矩形框居中,下面矩形框也居中? 采用一种比较讨巧的方式实现:在上面矩形框的下面定义一个无内容的空矩形框,然后下面两个矩形框在这个空矩形框的基础上 ...
- 利用CSS使元素在水平方向或水平,竖直同时居中
水平居中 三种方法,参考: <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset ...
- CSS盒子模型和水平、竖直方向的布局
一.块元素.行内元素和行内块元素 行内元素特征: (1)设置宽高无效 (2)对margin仅设置左右方向有效,上下无效:padding设置上下左右都有效,即会撑大空间 (3)不会自动进行换行 块状元素 ...
- 对象水平对齐,并且按照竖直方向排列
;; ;;程序名称:对象水平对齐程序,并且按照竖直方向排列 ;;执行命令:tb2 ;;程序功能:将选定的对象左对齐,并且按照竖直方向排列. ;; (defun c:tb2(/ selobjs oldc ...
最新文章
- python图像隐写技术_图像隐写技术(Image Steganography)
- 【转载】用 Pyinstaller 来打包 + 解决打包结果过大问题
- elastic search2.3.1(3) 查询语句拼接实战termQuery ,matchQuery, boolQuery, rangeQuery, wildcardQuery...
- cloudera manager 及CDH卸载
- cookie跨域_跨域问题的复现与整理
- Android 蓝牙模块
- Python图形用户界面、图形绘制
- 内存占用小的手机输入法_华为手机输入法中6个超实用的小技巧,你没用过就太可惜了!...
- 禁用并删除 Wordpress 文章修订(revision)记录
- Golang学习:生成GIF动画
- python 回归方程及回归系数的显著性检验_回归方程及回归系数的显著性检验
- SQL注入(持续更新中)
- saved_model_cli查看SavedModel
- Tanzu 学习系列之TKGm for vSphere 快速部署
- 石家庄地铁售票系统进度(田智凯,高泽伟)
- python将小写字母转化为大写_python如何定义函数将小写转换为大写
- unity新特性_新的Unity论坛
- 存储技术最强科普,这一篇就够了
- 分支定价求解GAP问题
- 电脑内存突然爆满的可能解决方法