css完成原☀素竖直垂直居中显示信息的7种方法

日期：2021-03-24 类型：科技新闻我要分享

关键词：html网页制作，php网页制作，网页设计稿，网页编辑工具，学生网页设计模板

【一】了解垂直居中原素的宽高

absolute + 负margin

编码完成

.wrapBox5{
    width: 300px;
    height: 300px;
    border:1px solid red;
    position: relative;
}
.wrapItem5{
    width: 100px;
    height: 50px;
    position: absolute;
    background:yellow;
    top: 50%;
    left:50%;
    margin-top: -25px;
    margin-left: -50px;
}

运作結果

absolute + margin auto

编码完成

.wrapBox{
    width: 300px;
    height: 300px;
    background: yellow;
    position: relative;
}
.wrapItem{
    width: 100px;
    height: 50px;
    background:green;
    display: inline-block;
    position: absolute;
    top: 0px;
    bottom:0px;
    left: 0px;
    right: 0px;
    margin:auto;
}

absolute + calc

编码完成

.wrapBox6{
    width: 300px;
    height: 300px;
    border:1px solid green;
    position: relative;
}
.wrapItem6{
    width: 100px;
    height: 50px;
    position: absolute;
    background:yellow;
    top: calc(50% - 25px);
    left:calc(50% - 50px);
}

运作結果

三种比照小结

当垂直居中原素了解宽高的情况下，设定垂直居中的方法较为简易单一。三种方式的实质是一样的，全是对垂直居中原素开展肯定精准定位，在精准定位到上50%，左50%后再拉回垂直居中原素的一半宽高完成真实的垂直居中。三种方法的差别就取决于拉回原素自身宽高的方法不一样。

【二】垂直居中原素的宽高不明

absolute + transform

编码完成

.wrapBox{
    width: 300px;
    height: 300px;
    background:#ddd;
    position: relative;
}
.wrapItem{
    width: 100px;
    height: 50px;
    background:green;
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50% , -50%);
}

运作結果

基本原理
基本原理相近于己知宽高的完成方法，只不过是当今垂直居中原素宽高不明，因此必须全自动获得当今垂直居中原素的宽高。translate特性恰好完成了该作用。

优点和缺点
优势：全自动测算自身的宽高
缺陷：假如同时应用transform的别的特性会造成互相危害。
因此：不在应用transform的别的特性时强烈推荐应用该方法

flex合理布局

.wrapBox2{
    width: 300px;
    height: 300px;
    background: blue;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*留意：即便不设定子原素为行块原素都不会占有一层*/
.wrapItem2{
    width: 100px;
    height: 50px;
    background:green;
}

运作結果

基本原理
将父级原素设定为流式的合理布局，依据flex合理布局的特性特点，设定子原素垂直居中。

优点和缺点
优势：flex合理布局灵便，不用对子原素开展一切的设定
缺陷：具备适配性。子原素的float、clear、position等没法应用，假如同时具备别的合理布局，非常容易造成危害。

table-cell合理布局

编码完成

.wrapBox3{
    width: 300px;
    height: 300px;
    background: yellow;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.wrapItem3{
    width: 100px;
    height: 50px;
    background:green;
    display: inline-block;
}

运作結果

基本原理
依据table的vertical-align特性，能够在报表原素下设置原素垂直居中，再依据text-align设定水准垂直居中

table原素

编码完成

.tableBox{
    border:2px solid yellow;
    width: 300px;
    height: 300px;
}
.tableBox table{
    width:100%;
    height:100%;
}
.centerWrap{
    text-align: center;
    vertical-align: middle;
}
.centerItem{
    display: inline-block;
    background:pink;
}

运作結果

小结
应用table标识开展合理布局，关键還是应用了vertical-align特性和text-align特性。可是相对性于上一种方法，应用table标识会造成很多的数据冗余编码。不强烈推荐应用

到此这篇有关css完成原素竖直垂直居中显示信息的7种方法的文章内容就详细介绍到这了,大量有关css 原素竖直垂直居中內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！

上一篇：小程序的优势—怎能免费制作自己的微信小程序返回下一篇：没有了