css 图文 上下 居中,CSS垂直居中的6种方法
垂直居中一直是CSS布局中比较令人头疼的问题,相比于水平居中,垂直居中对于不同的元素类型需要采取截然不同的策略,因此常常会因为策略的误用导致无法成功居中。这篇文章总结了垂直居中的6种常见策略。
Vertical-Align
切记 vertical-align 只对 table-cell 以及 inline-element 起作用,vertical-align 的值是相对于其父元素的,父元素必须是行内元素。
对于一行文字来讲,该属性的值是相对于行高(line-height)的。
对于 table-cell,该属性的值是相对于表格的行高的。
vertical-align 对于块级元素不起作用,例如我们无法用它去垂直居中一个div中的p元素,因此这个方法通常不是垂直居中的最优选择。
Line-Height 方法
这个方法适用于单行文字的垂直居中,只需要将包含文字元素的容器行高设置为大于字体大小并且等于元素的高度。默认情况下,文字上下部分会留有相同的空间,因而实现了文字的垂直居中。
html
css
#child {
line-height: 200px;
}
这种方法只适用于单行文字的垂直居中,如果需要多行文字居中,需要选择其他方法。
使用 Line-Height 垂直居中图片
使 line-height 可以实现图片的垂直居中,只需要在包含图片的父元素上设置 line-height 然后为图片设置 vertical-align: middle。
html
css
#parent {
line-height: 200px;
}
#parent img {
vertical-align: middle;
}
CSS表格法
之前已经提到 vertical-align 适用于 table-cell, 因此可以通过将元素转化为table来实现垂直居中。
html
css
#parent {
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
注意这种方法的好处在于支持内容的动态改变,缺点是不支持旧版的IE浏览器(<=IE7)。
绝对定位和负边距法
这种方法适用于块级元素,需要设置元素的高度。
下面的代码同时实现了子元素的水平和垂直居中:
html
css
#parent {
position: relative
}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
这种方法利用绝对定位先将元素的上边界和左边界移动到50%的位置,再根据元素的尺寸调整负边距以达到居中的效果。
这种方法适用于所有浏览器,但是由于需要预先设定元素高度,因此可能出现内容超出容器的情况。
绝对定位和拉伸法
和上一种方法一样,这种方法也需要将需要居中的元素设置绝对定位,并预先指定高度和宽度。不过在具体实现思想上有所不同。
html
css
#parent {
position: relative
}
#child {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
height: 30%;
width: 50%;
margin: auto;
}
这个方法的原理是使子元素有拉伸到容器边界的“趋势”,但由于子元素设置了高宽,因此无法拉伸。同时因为设置了 margin: auto,意味着相对方向的外边距相等,因此元素被“挤”到了容器的中央。
和上一种方法一样,这种方法的子元素内容也可能超出容器。
上下内边距(padding)相等法
这种方法通过设置上下padding相等来实现垂直居中。
html
css
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
上面的代码使用了相对尺寸,然而如果需要指定元素尺寸时,就需要使用绝对尺寸并做一个简单的计算了。例如,如果指定父元素高度为400px,子元素高度为100px,要实现垂直居中需要设置父元素的上下padding为150px。
浮动元素法
这个方法的原理是利用一个空的浮动元素来控制主要内容在容器中的位置。
html
css
#parent {
padding: 5% 0;
}
#floater {
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
}
#child {
clear: both;
height: 100px;
}
这个浮动元素可以向任意方向浮动,设置高度为50%,同时利用margin-bottom使该元素上移,上移高度为主要内容元素高度的一半。为了使内容元素移动到浮动元素下方,还需要为该元素设置 clear: both。
这种方法同样适用于所有浏览器,缺点是需要提前知道内容元素的高度。
css 图文 上下 居中,CSS垂直居中的6种方法相关推荐
- html怎么把元素垂直居中显示,分享html css元素垂直居中的几种方法
元素垂直居中的几种方法: 方法一:设置height和line-height 在CSS中,line-height 属性设置两段段文本之间的距离,也就是行高,如果我们把一段文本的line-height设置 ...
- CSS实现垂直居中的7种方法
CSS实现垂直居中的7种方法 1.设定行高(line-height) 2.设置伪元素::before 3.absolute + transform 4. 设置绝对定位 5.设置display:flex ...
- java文本框字体垂直居中_实现css文字垂直居中的8种方法
注:以下demo都只是针对现代浏览器所做,未兼容低版本的IE以及其他非主流浏览器. 实现css文字垂直居中的8种方法如下: 1.使用绝对定位和负外边距对块级元素进行垂直居中 css垂直居中效果: cs ...
- CSS图片水平垂直居中的三种方法
CSS图片水平垂直居中的三种方法 设置行高 使用定位和translate 使用弹性盒子 设置行高 我们知道img元素为行内快元素,所以首先设置图片元素的父元素里文字水平居中,行高与整体高度一致. 其次 ...
- 码匠编程:CSS让元素绝对居中,你知道几种方法?
经常碰到有同学在问,如何让一个元素上下左右都居中呢? 相信大家在面试的时候也会经常碰到这个问题,一下列出来几种方式以供大家参考,如有不足之处,请大家补充 问题描述: 给定两个元素,这两个元素是父子级关 ...
- css设置子盒子水平垂直居中(四种方式)
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
- 使用 CSS 实现垂直居中的8种方法
CSS垂直居中的8种方法 目录 CSS垂直居中的8种方法 1.通过vertical-align:middle实现CSS垂直居中. 2.通过display:flex实现CSS垂直 ...
- CSS实现背景图片垂直居中定位2种方法
实现背景图片垂直居中定位2种方法 第一种方法 background: url("../img/images/login_Bg.png") no-repeat center cent ...
- CSS:实现多行文本垂直居中的四种方法
对于单行文本,可以使用行高等于高度来设置垂直居中,但多行文本不适用. 实现多行文本垂直居中的四种方法 1. 利用表格元素table+vertical-align实现 将父元素设置为块级表格来显示,再将 ...
最新文章
- 女生学软件测试有哪些优势
- sqlite3里类似top的用法
- 北科大matlab,北科大matlab第五次作业多项式及其相关计算.doc
- 火车站购票系统c语言编程,用c语言编写火车购票系统怎么编写,在线等,急!!!...
- DirectX Shader 入门学习
- python 中将大列表拆分成小列表
- jq分页 不刷新页面_jQuery无刷新分页完整实例代码
- “拒绝访问”协助方案
- 【论文阅读】医疗影像分割中的半监督学习Semi-supervised
- getpass函数用法
- 解决IIS 下ASP程序错误只显示500,不显示具体错误描述的问题!
- 【Unity3D进阶4-12】Unity3D 对话系统
- 了解腾讯云云支付CPay特性及应用场景
- ios怎么更新测试软件,苹果iOS13 beta3测试版升级教程 iOS13 beta3更新方法
- win7配置magic mouse和keyboard
- 基于51单片机的智能窗帘设计
- 怎么提高图片分辨率?如何改变图片的分辨率?
- Python初探(一)
- 女人为什么喜欢抱着男人睡觉,一定…
- 国科大计算机体系结构习题整理
热门文章
- python微信接口发送消息_Python 微信公众号发送消息
- hibernate-jpa/hibernate-jpa-2.1-api-1.0.0.final.jar源代码下载地址
- 强化学习5——价值函数近似(VFA)
- php-箭头r含义,php中-箭头的用法和意义
- STM32 之十 供电系统及内部参照电压(VREFINT)使用及改善ADC参考电压
- 算法练习day2——190319(大顶堆、冒泡、选择、插入)
- const int、const int *、int *cosnt、const int * const、const int 的区别
- 如何洞察行业中的应用场景?(下篇)
- 百度智能云发布时空数据管理平台,打造一体化数据中台
- mysql缓存 碎片_Mysql查询缓存碎片、缓存命中率及Nagios监控