Java实现div元素在页面中的垂直居中方法详解
最编程
2024-08-08 19:06:10
...
垂直居中跟水平居中大差不差，只是细节调整一下就好。
1.文本垂直居中
在多数情况下，用<p><button>等标签创建的元素默认都是垂直居中，但是会有小部分情况并不居中，主要原因是高度发生改变但是行高不变，所以此时我们把行高line-height设置成和高度height一样大小就行，或者直接设置行高不设置高度，这样也可以把父元素撑开且垂直居中。
2.绝对定位
<style>
/*父元素定义（未知父元素大小）*/
.father_div{
position: relative;
}
/*居中元素样式*/
.center_div{
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 0;
transform: translateY( -50% );
}
</style>
<div class="father_div">
<div class="center_div"></div>
</div>这种方法所需要注意的和宽度绝对定位居中所需要注意的问题一样。
3.display：table-cell
.center{
display: table-cell;
vertical-align: middle;
}这种方法也是，几乎没人用。
上一篇： Div居中
下一篇： 理解CSS布局中的水平与垂直居中技巧