flex vue 垂直居中居上_推荐几种在移动端实现垂直居中的方法[通俗易懂]

flex vue 垂直居中居上_推荐几种在移动端实现垂直居中的方法[通俗易懂]推荐几种在移动端实现垂直居中的方法。方法1:table-cellhtml结构垂直居中CSS.box1{display:table-cell;vertical-align:middle;text-align:center;}方法2:display:flex.box2{display:flex;justify-content:center;align-items:Center;}123…

大家好,又见面了,我是你们的朋友全栈君。

推荐几种在移动端实现垂直居中的方法。

方法1:table-cell

html结构

垂直居中

CSS.box1{

display: table-cell;

vertical-align: middle;

text-align: center;

}

flex vue 垂直居中居上_推荐几种在移动端实现垂直居中的方法[通俗易懂]

方法2:display:flex.box2{

display: flex;

justify-content:center;    align-items:Center;}12345

方法3:绝对定位和负边距.box3{    position:relative;}.box3 span{

position: absolute;

width:100px;

height: 50px;

top:50%;

left:50%;

margin-left:-50px;

margin-top:-25px;

text-align: center;

}12345678910111213

方法4:绝对定位和0.box4 span{

width: 50%;

height: 50%;

background: #000;

overflow: auto;

margin: auto;

position: absolute;

top: 0;

left: 0;     bottom: 0;

right: 0;

}123456789101112

这种方法跟上面的有些类似,但是这里是通过margin:auto和top,left,right,bottom都设置为0实现居中。不过这里得确定内部元素的高度,可以用百分比,比较适合移动端。

方法5:translate.box6 span{

position: absolute;

top:50%;

left:50%;

width:100%;

transform:translate(-50%,-50%);

text-align: center;

}12345678

这实际上是方法3的变形,移位是通过translate来实现的。

方法6:display:inline-block.box7{

text-align:center;

font-size:0;}.box7 span{

vertical-align:middle;

display:inline-block;

font-size:16px;}.box7:after{

content:”;

width:0;

height:100%;

display:inline-block;

vertical-align:middle;}12345678910111213141516

这种方法确实巧妙…通过:after来占位。

方法7:display:flex和margin:auto.box8{

display: flex;

text-align: center;}.box8 span{    margin: auto;}1234567

方法8:display:-webkit-box.box9{

display: -webkit-box;

-webkit-box-pack:center;

-webkit-box-align:center;

-webkit-box-orient: vertical;

text-align: center}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/145991.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • cad怎样生成轮廓线(图样中可见轮廓线用什么线)

    一般在做影像处理时,为提升效率,常会将影像转为二值影像后再进行处理。在EmguCV内有许多找轮廓线的方法,但是随着版本更新,不同版本的函数不见得会一样,每次都要重新查询实在很麻烦,那不如把他们记下来。版本概要:EmguCV版本:3.2.0.2682编译器版本:VisualStudio2017Community方案平台:x64(许多导致程式无法执行的原因是因为没有改执

  • 最强DE战斗力

    最强DE战斗力

  • 《移动App测试的22条军规》—第5章5.3节规范与习惯

    《移动App测试的22条军规》—第5章5.3节规范与习惯

  • C#酒店管理系统_酒店管理系统免费

    C#酒店管理系统_酒店管理系统免费1.酒店管理系统概要c#实现的酒店管理系统,里面包含了数据库文件,简易酒店管理系统源码,采用WinFrom程序设计开发的酒店管理系统;应用到标准的三层技术,多个视图工具控件;功能介绍用户可根据自己的需求入住登记不同类型的房间,同时登记个人基本信息,管理员可通过对不同类型房间的管理及房间信息管理设置不同的类型房间进行增删改查,并对入住客户的信息及点退房信息查询,并改变房间的入住与退房或空房间的状态信息2.数据库设计由于数据库较多,所以暂时不放出来,下面我们看运行截图3.运行截图

  • activate-power-mode安装与设置

    activate-power-mode安装与设置Windowactivatepowermode去掉combo/shake,其他三个全勾上,现在用起来就很爽了,赶紧体验吧。

  • 人工智能猴子摘香蕉问题的逻辑表示_猴子拿香蕉实验感悟

    人工智能猴子摘香蕉问题的逻辑表示_猴子拿香蕉实验感悟猴子摘香蕉问题:一个房间里,天花板上挂有一串香蕉,有一只猴子可在房间里任意活动(到处走动,推移箱子,攀登箱子等)。设房间里还有一只可被猴子移动的箱子,且猴子登上箱子时才能摘到香蕉,问猴子在某一状态下(设猴子位置为A,箱子位置为B,香蕉位置在C),如何行动可摘取到香蕉。代码样例:#includestructState{ intmonkey;//-1:MonkeyatA

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号