学习过程中经常遇到要居中的问题,水平居中问题比较好解决,而垂直居中问题因为vertical-align经常失效,所以不容易实现,今天将自己总结的一些方法归纳于这边。
1.div中单行文字垂直水平居中。条件:外层div高度已经给定。代码如下:
<style type="text/css">
.div3{
border:1px solid red;
text-align:center;
height:200px;
line-height:200px;
width:300px;
overflow:hidden;
}
</style>
<div class="div3">
2.div中多行文字垂直水平居中。条件:无。代码如下:
<style type="text/css">
.div4{
border:1px solid red;
width:400px;
padding-bottom:20px;
padding-top:20px;
text-align:center;
}
</style>
<div class="div4">
div中多行文字垂直水平居中<br />
div中多行文字垂直水平居中<br />
div中多行文字垂直水平居
</div>
3.div中嵌套div,使得中间div垂直水平居中。条件:无。应用table模拟法。代码如下:
<style type="text/css">
.