如果 .parent 的 height 不写，只需要 padding: 10px 0; 就能将 .child 垂直居中；
如果 .parent 的 height 写死了，就很难把 .child 居中，以下是垂直居中的方法。
忠告：能不写 height 就千万别写 height。
<body>
<div class="parent">
<div class="child">儿子儿子儿子儿子儿子儿子儿子儿子儿子儿子儿子儿子儿子儿子儿子儿子儿子儿子儿子儿子儿子儿子儿子
儿子儿子儿子儿子儿子儿子儿子儿子儿子儿子儿子儿子儿子儿子儿子儿子</div>
</div>
</body>
<style>
.parent{
border: 1px solid red;
}
.child{
border: 1px solid green;
padding:100px 0;
}
</style>
效果如下：
方法1:使用table标签
table标签中的内容是自动垂直居中的，代码如下：
<body>
<table class="parent">
<tr>
<td class="child">
一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文
</td>
</tr>
</table>
</body>
<style>
.parent{
border: 1px solid red;
height: 600px;
}
.child{
border: 8px solid green;
}
</style>
效果如图：
方法2：把div变成table
<body>
<div class="table">
<div class="td">
<div class="child">
一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一
串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
</div>
</div>
</div>
</body>
.table{
display:table;//把div变成table标签
border:10px solid red;
height:600px;
}
.td{
display:table-cell;//把div变成td
border:10px solid blue;
vertical-align:middle;
}
.child{
border:10px solid green;
}
效果如图：
方法3:100% 高度的 afrer before 加上 inline block
<body>
<div class="parent">
<span class=before></span><div class="child">
一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
</div><span class=after></span>
</div>
</body>
<style>
.parent{
border:3px solid red;
height:600px;
text-align:center;
}
.child{
border:2px solid green;
display:inline-block;
width:300px;
vertical-align:middle
}
.parent .before{
border:1px solid red;
display:inline-block;
height:100%;
vertical-align:middle;
}
.parent .after{
border:1px solid red;
display:inline-block;
height:100%;
vertical-align:middle;
}
</style>
效果如图：
方法4：使用position和margin
<body>
<div class="parent">
<div class="child">
一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
</div>
</div
</body>
<style>
.parent{
border:10px solid red;
height:300px;
position:relative;
}
.child{
border:2px solid blue;
width:200px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin-top:-50px; /*子元素高度的一半*/
margin-left:-100px; /*子元素宽度的一半*/
}
</style>
方法5:使用position和transform
<body>
<div class="parent">
<div class="child">
一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
</div>
</div
</body>
<style>
.parent{
height: 400px;
border: 1px solid red;
position: relative;
}
.child{
position:absolute;
border:1px solid green;
width:200px;
top:50%;
left:50%;
transform:translate(-50%,-50%); /* x方向和y方向各向左和上移动元素宽高的50% */
}
</style>
效果如图：
方法6:使用position和margin auto
<body>
<div class="parent">
<div class="child">
一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
</div>
</div
</body>
<style>
.parent{
height: 500px;
border: 1px solid red;
position: relative;
}
.child{
border:2px solid green;
position:absolute;
width:300px;
height:200px;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
}
</style>
使用该方法子元素需要有宽高,效果如图：
方法7:使用flex布局 <最推荐>
<body>
<div class="parent">
<div class="child">
一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
</div>
</div
</body>
<style>
.parent{
border:10px solid red;
height:400px;
display:flex;
justify-content:center;
align-items:center;
}
.child{
border:10px solid green;
width:200px;
}
</style>
效果如图：
