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)


相关推荐

发表回复

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

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