div+css竖直垂直居中的5种完成方式

日期:2020-09-22 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

方式1:把1些 div 的显示信息方法设定为报表,因而大家可使用报表的 vertical-align特性。
构造实际效果以下:
CSS

拷贝编码
编码以下:

div#wrapper {
display: table;
width: 500px;
height: 500px;
background-color: #c00;
}
div#row {
display: table-row;
}
div#cell {
display: table-cell;
vertical-align: middle;
}

html

拷贝编码
编码以下:

<div id="wrapper">
<div id="row">
<div id="cell">
If you want to sell sugar water for the rest of my life or want a chance to change the world
</div>
</div>
</div>

优势:无需受內容高宽比的限定,简易完成竖直垂直居中;
缺陷:兼容问题ie6,7

方式2:这个方式应用肯定精准定位的 div,把它的 top 设定为 50%,margin-top 设定为负的 content 高宽比。这代表着目标务必在 CSS 中特定固定不动的高宽比。
构造实际效果以下:

CSS

拷贝编码
编码以下:

div#wrapper {
position: relative;
width: 500px;
height: 500px;
background-color: #c00;
}
div#content {
position: absolute;
top: 50%;
left: 0;
width: 400px;
height: 300px;
margin-top: ⑴50px;
background-color: pink;
}

html

拷贝编码
编码以下:

<div id="wrapper">
<div id="content">

</div>
</div>

优势:适配性好
缺陷:务必了解內容盒子的高宽比才能够,有了这点限定;

方式3:这个方式和方式2的基本原理是1样的。空话很少说看编码

CSS

拷贝编码
编码以下:

.wrap {
height: 500px;
width: 500px;
background-color: pink;
}
.additional {
height: 50%;
margin-bottom: ⑴20px;
}
#content {
height:240px;
width:70%;
background-color: #000;
}

HTML

拷贝编码
编码以下:

<div class="wrap">
<div class="additional"></div>
<div id="content">
</div>
</div>

优缺陷和法21样,缺陷嘛多了个附加的标识;

方式4:这个方式应用了1个 position:absolute,有固定不动宽度和高宽比的 div。这个 div 被设定为 top:0; bottom:0;。可是由于它有固定不动高宽比,实际上其实不能和左右都间隔为 0,因而 margin:auto; 会使它垂直居中。应用 margin:auto;使块级元素竖直垂直居中是很简易的。
构造实际效果以下:

CSS

拷贝编码
编码以下:

#content {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:240px;
width:70%;
background-color: #000;
}

HTML

拷贝编码
编码以下:

<div id="content">
Content here</div>

优势:十分简易
缺陷:兼容问题ie6,7

方式5:这个方式只能将单写作本置中。只必须简易地把 line-height 设定为那个目标的 height 值便可以使文字垂直居中了。这个就无需案例了,您你看就搞清楚;