一、对于行内元素
若该行内元素只有一行，且该行内元素父元素的高度一定，可以设置该行内元素的line-height属性，属性值为父元素的高度。
二、对于块元素
通过设置vertical-align属性实现垂直居中。
1、在<table>元素的<td>中使用vertical属性。
td{
vertical-align:middle;
}2、对于普通的<div>元素，首先设置该<div>元素display:table-cell;然后便可以使用vertical-align属性进行垂直居中。
注意：使用该方法时，不能设置该元素浮动 float 或进行绝对定位 position，否则无法垂直居中。
div{
display:table-cell;
vertical-align:middle;
}
3、可以设置行内块级元素的vertical-align，从而设置该元素的 顶部/中部/底部 与其它行内元素对齐。
备注：该方法相当于在行内元素中插入图片。
代码和效果图如下所示：
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1{
display: inline-block;
vertical-align: middle;
background-color: red;
}
</style>
</head>
<body>
assssssfdsfsdf<div class="div1">hasdkjagsdhjagdk<br>asdasd</div>qwdasfasdf
</body>
三、对行内元素、块级元素都有效。
通过绝对定位 position 与其它属性的组合使用实现垂直居中；
使用弹性伸缩布局。
1、设置元素的position+margin属性，
1.1、使用场景：要垂直居中元素的长、高值确定时
首先，设置块级元素<div>的父元素的 position:relative；
其次，设置块级元素<div>的css为：position:absolute;top:50%;left:50%;
假设该块级元素<div> width:200px;height:80px;
最后，设置该块级元素<div>的外边距：margin:-40px 0px 0px -100px;
备注：因为块级元素<div>的绝对定位是以块级元素<div>的左上角为基准的，所以要通过外边距减去搜索框长和宽的一半。
1.2、使用场景：元素的长、高值不确定时
首先，设置块级元素<div>的父元素的 position:relative；
其次，设置块级元素<div>的css为：position:absolute;top:0;bottom:0;margin:auto;
假设该块级元素<div>已完成垂直居中
2、设置元素的position+transform属性
使用场景：针对流体式、响应式布局，要居中元素的高、宽值不确定时
首先，设置块级元素<div>的父元素的 position:relative；
其次，设置块级元素<div>的css为：position:absolute;top:50%;left:50%;
最后，设置该块级元素<div>的transform：transform:translate(-50%,50%);
3、弹性伸缩布局
使用场景：响应式布局
设置父元素的CSS属性 display:flex; justify-content:center;
示例代码如下：
<div class="div3">
<div class="div4">
</div>
</div>
<style>
.div3{
border:1px solid black;
height:400px;
display: flex;
justify-content:center;
}
.div4{
width:90%;
height:80%;
border:1px solid black;
background-color:orange;
}
</style>
372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
