8种垂直居中的方法

八种垂直居中的方法垂直居中的需求经常遇到,通过资料实践了八种垂直居中的方法。以下的方法都围绕着该HTML展开HTML代码<divstyle=”width:300px;height:300px;”class=”wrap”><divstyle=”width:100px;height:100px”class=”box”></div></div>CSS方法1(常用):display:flex.wra

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

八种垂直居中的方法

垂直居中的需求经常遇到,通过资料实践了八种垂直居中的方法。

以下的方法都围绕着该HTML展开
HTML代码

    <div class="wrap">
        <div class="box"></div>
    </div>

CSS
方法1(常用):display:flex

.wrap{ 
   
	width:300px;
	height:300px;
    border: 1px solid red;
    display:flex;
    justify-content:center;
    align-items:center;
}
.box{ 
   
	height:100px;
	width:100px
    boder:1px solid blue;
}

方法2: table-cell

vertical-align 属性设置一个元素的垂直对齐方式。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

        .wrap{ 
   
            width: 300px;
            height: 300px;
            border: 1px solid red;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        .box{ 
   
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            display: inline-block;
        }

方法3: margin,transform配合

.wrap{ 
   
            width: 300px;
            height: 300px;
            background-color: pink;
            /* border: 1px solid red; */
            /*防止外边距塌陷。解决外边距塌陷的方法: 父元素加overflow:hidden或加上边框*/
            overflow: hidden;
        }
        .box{ 
   
            width: 100px;
            height: 100px;
            background-color: plum;
            margin:50% auto;
            transform: translateY(-50%); 
        }

方法4: inline-block+vertical-aligin

        .wrap { 
   
            width: 300px;
            height: 300px;
            background-color: pink;
            text-align: center;
            line-height: 300px;
        }
        .box { 
   
            width: 100px;
            height: 100px;
            /* 重新设置子元素的行高,否则会继承父元素的行高*/
            line-height: 100px;
            background-color: plum;
            display: inline-block;
            /* middle 把此元素放置在父元素的中部。 */
            vertical-align: middle;
        }

方法5:absolute+负margin

        .wrap{ 
   
            width: 300px;
            height: 300px;
            position: relative;
            background-color: plum;
        }
        .box{ 
   
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            /*宽高的一半*/
            margin-left: -50px;
            margin-top: -50px;
            background-color: powderblue;
        }

方法6 absolute+margin:auto
和方法5类似,当宽度和高度未知时使用

        .wrap{ 
   
            width: 300px;
            height: 300px;
            position: relative;
            background-color: plum;
        }
        .box{ 
   
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 0;
            bottom:0;
            right:0;
            margin:auto;
            background-color: powderblue;
        }

方法7:absolute+transform
与方法5类似

 .wrap { 
   
            width: 300px;
            height: 300px;
            position: relative;
            background-color: plum;
        }

        .box { 
   
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            
            transform: translate(-50%,-50%);
            background-color: powderblue;
        }

方法8 强大的grid
阮一峰大佬Grid 网格布局教程

.wrap { 
   
            width: 300px;
            height: 300px;
            display: grid;
            background-color: plum;
        }

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

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

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

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

(0)


相关推荐

  • 拼图汇总

    拼图汇总

  • 漏洞挖掘——实验11 侧信道攻击+TCP/IP实验

    漏洞挖掘——实验11 侧信道攻击+TCP/IP实验题目Lab侧信道攻击+TCP/IP实验Pre1、用IE访问某些网站的时候,输入javascript:alert(document.cookie)会有什么反应,解释原因。2、阅读下面两篇文章或者阅读一本书<<JavaScriptDOM编程艺术>>:JavascriptTutorialhttps://www.evl.uic.edu/luc/bv…

  • 第一范式、第二范式及第三范式的定义与举例

    第一范式、第二范式及第三范式的定义与举例第一范式存在非主属性对码的部分依赖关系R(A,B,C)AB是码C是非主属性B–>CB决定CC部分依赖于B第一范式定义:如果关系R中所有属性的值域都是单纯域,那么关系模式R是第一范式的那么符合第一模式的特点就有1)有主关键字2)主键不能为空,3)主键不能重复,4)字段不可以再分例如: StudyNo  |  Name  |  Sex  

  • MS17010漏洞利用总结

    MS17010漏洞利用总结0x01常规打法扫描是否存在ms17-010漏洞:nmap-n-p445–scriptsmb-vuln-ms17-010192.168.1.0/24–openMSF常规漏洞利用:msf>useexploit/windows/smb/ms17_010_eternalbluemsf>setrhost192.168.1.112反向打:msf>setpayloadwindows/x64/meterpreter/reverse_tcpm

  • 编译安装单机版Redis6

    编译安装单机版Redis6

  • 宽字节注入原理_sqlmap宽字节注入

    宽字节注入原理_sqlmap宽字节注入在mysql中,用于转义的函数有addslashes,mysql_real_escape_string,mysql_escape_string等,还有一种情况是magic_quote_gpc,不过高版本的PHP将去除这个特性。首先,宽字节注入与HTML页面编码是无关的,笔者曾经看到<metacharset=utf8>就放弃了尝试,这是一个误区,SQL注入不是XSS。虽然他们中编码的成…

    2022年10月14日

发表回复

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

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