css垂直居中的几种方法

灰太狼 2022-03-25 13:10 305阅读 0赞

`<div ``class``="app app1"><span>垂直居中的元素</span></div>`

一：

`.app1{`

`    ``display: table-cell;`

`    ``vertical-align: middle;`

`    ``text-align: center;        `

`}`

二：

`.app2{`

`    ``display: flex;`

`    ``justify-content:center;`

`    ``align-items:Center;`

`}`

`三：`

`.app3{position:relative;} .app3 span{             position: absolute;             width:100px;             height: 50px;             top:50%;             left:50%;             margin-left:-50px;             margin-top:-25px;             text-align: center;         }`

`四：`

`.app4 span{`

`  ``width: 50%; `

`  ``height: 50%; `

`  ``background:` `#000;`

`  ``overflow: auto; `

`  ``margin: auto; `

`  ``position: absolute; `

`  ``top: 0; left: 0; bottom: 0; right: 0; `

`}`

`五：`

`.app5 span{`

`            ``position: absolute;`

`            ``top:50%;`

`            ``left:50%;`

`            ``width:100%;`

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

`            ``text-align: center;`

`        ``}`

`六：`

`.app6{`

`  ``text-align:center;`

`  ``font-size:0;`

`}`

`.app6 span{`

`  ``vertical-align:middle;`

`  ``display:inline-block;`

`  ``font-size:16px;`

`}`

`.app6 :after{`

`  ``content:``''``;`

`  ``width:0;`

`  ``height:100%;`

`  ``display:inline-block;`

`  ``vertical-align:middle;`

`}`

`七：`

`.app7{`

`    ``display: flex;`

`    ``text-align: center;`

`}`

`.app7 span{margin: auto;}`

发表评论取消回复

表情：

评论列表（有 0 条评论，305人围观）

还没有评论，来说两句吧...

相关阅读

相关 div垂直居中的几种方法

第一种 1. 父类 .father { height:100%; // height:100vh; width:100%;

小鱼儿/ 2023年03月03日 08:48/ 0 赞/ 191 阅读

相关 css 使div水平垂直居中的几种方法

一、脱离文档流元素的居中方法一：margin:auto法 div{ width: 300px; height: 300

刺骨的言语ヽ痛彻心扉/ 2022年12月16日 06:27/ 0 赞/ 122 阅读

相关 CSS文本垂直居中的几种方法

[观看更佳-点击前往][-] 一、单行文本的居中 1.文字水平居中 <div class='box' style="tex

青旅半醒/ 2022年12月13日 14:02/ 0 赞/ 291 阅读

相关 CSS垂直居中的几种方法

> 单行内容居中单行文字居中，只需要设置文字的line-height属性和父容器等高即可。 <div class="box"> <p>我是

傷城~/ 2022年07月28日 04:28/ 0 赞/ 246 阅读

相关 CSS水平垂直居中的几种方法

方法1： “margin:auto”结合”position:absolute” //css代码： .box1{ width:200px;

╰+攻爆jí腚メ/ 2022年05月17日 21:19/ 0 赞/ 228 阅读

相关 css垂直居中的几种方法

`<div ``class``="app app1"><span>垂直居中的元素</span></div>` 一： `.app1{` ` ``display: ta

灰太狼/ 2022年03月25日 13:10/ 0 赞/ 306 阅读

相关纯CSS实现垂直居中的几种方法

转自: [https://www.cnblogs.com/hutuzhu/p/4450850.html][https_www.cnblogs.com_hutuzhu_p_445

妖狐艹你老母/ 2022年01月30日 10:04/ 0 赞/ 247 阅读

相关 CSS垂直水平居中的几种方法

作为一个前端小猴子，不管是面试的时候还是工作中，我们都会或多或少的遇到“使用css居中”的效果，今天就写一篇关于css垂直水平居中的几种方法。 ![aHR0cHM6Ly91c

柔光的暖阳◎/ 2021年10月24日 01:14/ 0 赞/ 782 阅读

相关 CSS垂直居中的8种方法

CSS垂直居中的8种方法 1、通过verticle-align:middle实现CSS垂直居中。通过vertical-align:middle实现CSS垂直居中是最常

古城微笑少年丶/ 2021年07月26日 11:38/ 0 赞/ 450 阅读

相关 CSS - 设置盒子垂直居中的几种方法

CSS设置盒子垂直居中的几种方法将要实现的效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

骑猪看日落/ 2021年07月25日 15:17/ 0 赞/ 428 阅读