h5文字垂直居中_CSS居中的常用方式以及优缺点
前言
居中是页面开发中经常遇到的问题。
使用合适的、简单的、兼容性好的居中方式是我们页面仔在整个工作生涯中都要面对的问题。
text-align:center
来看这个例子,一张图片和文字进行居中。如下图所示:
img
与文字内容都是行内元素,因此直接使用text-align
就行了。代码如下图所示:
在最外层的div
中使用text-align:center
的问题是,会导致所有的子元素都会继承这个属性。如果还有一段文字用作介绍该图片的作用时,这段文字也会被居中。
而我们希望这段文字是左对齐的,就不得不单独设置其text-align:left
属性,以覆盖其父元素的属性。并且如果还有更多的子元素也需要这样做,覆盖属性本身就是下策,因此要采用其他方法。
margin: 0 auto
由于显示的图片可能是变化的,宽高是不定的,但显示区域是固定的,所以一般会显式地给图片设置一个宽高。这个时候知道宽度就可以设置margin:0 auto
方法,左右的margin
设置为auto
,浏览器就会自动设置左右的margin
值为容器剩余宽度的一半。
使用margin: 0 auto
可以说是最常用的左右居中的方法,不仅适用于块级元素也适用于行内元素。很多网页的布局都是使用margin: 0 auto
,例如淘宝pc端,如下图所示:
display: table-cell
第一个垂直居中的方法是借助table-cell
属性,效果图如下:
table-cell
的一个好处就是它可以兼容到IE8
。
table-cell
属性的缺点:
- 容器的
margin
属性失效,因为margin
不适用于表格布局。所以使用margin: 0 auto
属性是不能使container
左右居中的。解决的方法也很简单:只需要在container
外层再多套一个div容器,然后设置这个外层容器的margin: 0 auto
即可。 - 设置了
table-cell
的元素再设置宽高为百分比是不起作用的。常见的场景是要将宽度属性设置为外层容器宽度的100%,解决方法是将container
的宽度设置成一个很大的值,例如5000px
,这样就达到100%的目的。 - 如果
container
需要设置position
为absolute
,table-cell
属性就会失效。因为设置position: absolute
就会把元素display
强制设置为block
类型。解决办法还是在外层套一层div
容器,将position: absolute
属性作用于这个容器上。
position: relative
上面所说table-cell
的第三缺点的解决方法有一个副作用,就是设置内层container
的height
和width
为百分比时会失效。由于这个原因,导致有一种情况不能使用display:table-cell
垂直居中。
就是需要在页面弹出一个框,这个框的位置需要在当前屏幕中左右上下居中。这时候通常需要将这个框的position
设置为absolute
,这个时候table-cell
就不能发挥作用了。
解决办法是使用relative
定位,设置top
为50%,将弹窗的起始位置放到页面中间,再设置margin-top
为元素高度的负一半,这样使得弹窗在页面中间位置再往上移到一半自身的高度,这就正好在中间了,左右居中也可类似处理。
使用此方法的缺点是需要知道具体的高度,无法根据内容长短自适应。
tranform: translate
用tranform
方法,将margin-top
一个具体像素的负值改成transform: translate(0, -50%)
,因为translate
里面的百分比是根据元素本身的高度计算的,所以就可以达到自适应的效果。
这个办法十分方便,而且加上-webkit-
前缀,可以兼容到IE9。
而margin-top:-100px
与transform:translate(0, -50%)
都有一个缺点,就是如果设置left
为50%是借助position
为absolute
的话,可能会导致换行
本来应该是一行显式的p
元素却换行了,这是因为在一个relative
元素里面的absolute
定位的子元素会通过行内元素换行的方式,尽可能不超过容器的边界。由于设置left
为50%,导致p
元素超了边界,所以就换行了,即使再设置translate:-50%
也已经晚了。
flex布局
flex
布局十分容易和方便,只需在副容器设置3个属性就行了
.container{display: flex;align-items: center;justify-content: center;
}
但flex
的缺点是不支持IE
vertical-aligin:middle
vertical-aligin:middle
主要是运用在行内元素中的。
如果不做任何处理,那么默认的垂直居中是以baseline
为基准的。
为了能够垂直居中,需要改变居中方式。
要每个元素都要设置。
如果container
的高度比图片要高,就会有留空的效果,如下:
为了让中间的内容能够在container
里上下居中,可以设置文字的line-height
为container
的高度,这样文字就上下居中了。由于图片与文字是垂直居中的,所以图片在container
里也是上下居中了。
也就是说,如果需要垂直居中一个div
里的比div
高度小的图片,可以添加一个元素,让它的line-height
等于div
的高度。下面使用伪元素::before
来添加line-height
。
或者使用display: inline-block
属性,加上height: 100%
。这个方法兼容性更好。
absolute与margin:auto
使用absolute
定位与margin:auto
方法也可以实现居中。
如果图片比container
大,这种方法就不适用了。因为有一个种比较常见的场景:图片有一边和contianer
一样大,另一边按图片的比例缩放,图片居中显示,超出的截断。这种情况下,只需把left/right/top/bottom
设置为一个很大的负值即可。
总结
以上就是css
中常用的居中方法,如果有更好的方法欢迎留言讨论。
作者: zhangwinwin
链接:CSS居中的常用方式以及优缺点
来源:github
h5文字垂直居中_CSS居中的常用方式以及优缺点相关推荐
- h5文字垂直居中_CSS中垂直居中和水平垂直居中的方法
flex垂直居中: 第一种:使用flex布局,让居中元素的父元素为flex属性,让它在交叉轴上center就可以达到居中效果了: html代码: <div class="father& ...
- h5文字垂直居中_CSS实现居中的几种方式你都了解吗?
CSS(Cascading Style Sheets)层叠样式表,是在1996年左右,W3C(万维网联盟)做HTML标准化的同时在HTML4.0之外开发的,拯救了当时越来越臃肿杂乱的HTML. 本文将 ...
- input文字垂直居中_CSS的带文字居中分析
CSS居中的方法有特别多,这里只介绍最基本的方法. CSS中分块级元素和内联元素,但是块级元素或者内联元素都可以设置display,最常用的三种display--inline.block.inline ...
- text文字垂直居中_CSS垂直居中,你会多少种写法?
来源 | https://wintc.top/article/4 CSS控制居中是前端开发中非常常用的布局技能,本文列出几种CSS控制元素居中的几种方法.谈及HTML元素居中展示,涉及到水平居中和垂直 ...
- h5文字垂直居中_基于两款开源 h5 媒体编辑器定制一套海报系统
收到一份需求,是要制作一套在线海报系统,系统的参考样例如下图所示 分为资源展示站 海报的设计工具 这种平台现在市场上成功的有好多家,功能都较为完备并且模板十分丰富.这种需求往大了做可以称之为 DaaS ...
- h5文字垂直居中_PS教程:巧用自由变换,制作折纸文字效果
本期教学视频链接附在文末.(每期的图文教程都有相关视频教程,图文结合视频,学习效果更好哦) 文字的PS世界也是很丰富的,之前出了多期特殊字效设计的教程,大家还是很感兴趣的,本期教程我们来学习制作另一种 ...
- php中文字怎么上下居中,CSS怎么设置垂直居中?
在我们开发前端页面的时候,为了让页面效果美观,会出现需要垂直居中效果的地方.本章就让我们来了解一下用css如何设置垂直居中,详细介绍一下设置文字与div盒子的垂直居中的几种方法.有一定的参考价值,有需 ...
- 文字居中input文字垂直居中
做移动端都会遇到文字垂直居中的问题,特别是有些手机真的很难调整,然后就是必须要文字居中,那就说说几种文字垂直居中的问题吧. 普通的元素例如div 1.这种居中,利用padding上下值来居中. 2.知 ...
- html文字竖直书写,css 文字竖直居中的写法和图片垂直居中代码(图文)
界面上文章左右居中使用text-aligin:center,上下竖直居中的写法如下, 图片垂直居中的代码 文字.图片居中显示的方法 .content{ height: 40px; line-heigh ...
最新文章
- Python 元组的使用
- [您有新的未分配科技点]可,可,可持久化!?------0-1Trie和可持久化Trie普及版讲解...
- 48. Rotate Image
- Linux中介绍who命令实例
- 长沙校园招聘总结-做为技术面试官
- prettier 配置参数说明
- Rust 语言本身的问题
- UVA558 LA5579 Wormholes【Floyd算法】
- vue项目之不一样的axios封装(+防抖函数)
- 如何做软件需求分析(个人工作经验总结)
- 《符号学:原理与推演》(一)符号的构成
- Playground 教程之SceneKit绘制个Torus圆环面
- dw2017不显示动画_10个创建2017年动画视频的最佳工具
- facebook php-webdriver 安装与使用
- surface装双系统后在移动硬盘上装ubuntu系统
- DNA-蛋白翻译过程的Python实现
- 什么是工作流?(转贴)
- Windows7瘦身优化
- 计算机配件声卡,DIY组装电脑到底需要哪些配件 攒机网卡声卡之类的要买吗
- SAP 技术原理搬砖 - ARAP重分类:为啥我和外币评估设计原理不一样?