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)


相关推荐

  • android redis客户端,redis client (redis客户端)

    android redis客户端,redis client (redis客户端)redisclient(redis客户端)是一款编程辅助软件。这款软件协助开发人员和保护人员便利的树立,修正,删去,查询redis数据,彻底不需要了解redis指令。能够让用户便利的修改数据,剪切,仿制,张贴redis数据,能够导入,导出redis数据,能够对redis数据排序,进步编程功率和准确性。redisclient(redis客户端)软件功用重命名Redis数据更新Redis…

  • js 字符串截取方法汇总

    js 字符串截取方法汇总一、使用slice()截取1,函数说明slice()方法可通过指定的开始和结束位置,提取字符串的某个部分,并以新的字符串返回被提取的部分。语法如下:string.slice(start,end);start(必需):规定从何处开始选取。如果是负数,那么它规定从字符串尾部开始算起的位置。也就是说,-1指最后一个字符,-2指倒数第二个字符,以此类推。参数说明:end(可选):规定从何处结束选取,即结束处的字符下标。如果没有指定该参数,那么截取的字符串包含从start到结束的所…

  • 补充排序函数(更快速)

    补充排序函数(更快速)

  • 憨批的语义分割重制版5——Keras 搭建自己的Unet语义分割平台

    憨批的语义分割重制版5——Keras 搭建自己的Unet语义分割平台憨批的语义分割12——Keras搭建自己的Unet语义分割平台注意事项学习前言什么是Unet模型代码下载Unet实现思路一、预测部分1、主干网络介绍2、加强特征提取结构3、利用特征获得预测结果二、训练部分1、训练文件详解2、LOSS解析训练自己的Unet模型注意事项这是重新构建了的Unet语义分割网络,主要是文件框架上的构建,还有代码的实现,和之前的语义分割网络相比,更加完整也更清晰一些。建议还是学习这个版本的Unet。学习前言重置一下我最喜欢的Unet。什么是Unet模型Unet是一个优秀

  • 三十六:Redis过期键删除策略[通俗易懂]

    redisDb结构的expires字典保存了数据库中所有键的过期时间,我们称这个字典为过期字典:❑过期字典的键是一个指针,这个指针指向键空间中的某个键对象(也即是某个数据库键)。❑过期字典的值是一个longlong类型的整数,这个整数保存了键所指向的数据库键的过期时间——一个毫秒精度的UNIX时间戳。❑定时删除:在设置键的过期时间的同时,创建一个定时器(timer),让定时器在键的过…

  • 利用Openssl生成证书

    利用Openssl生成证书生成privatekeyopensslgenrsa-des3-outca.key2048生成根证书opensslreq-new-x509-sha384-days3650-keyca.key-outca.crt生成二级证书的privatekeyopensslgenrsa-outsecond.key2048生成二级证书的CSRopensslreq-new-keysecond.key-outsecond.csropen.

发表回复

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

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