Cocolib

Appearance

On this page

如何垂直居中一个元素 ​

参考

如何居中一个元素（终结版） - 掘金 (juejin.cn)

1、单行内联元素垂直居中 ​

设置line-height=height

css
<div id="box">
     <span>单行内联元素垂直居中。</span>。
</div>
<style>
 #box {
    height: 120px;
    line-height: 120px;
    border: 2px dashed #f69c55;
    }
</style>

2、多行内联元素垂直居中 ​

img
html
<div class="parent">
    <p>Dance like nobody is watching, code like everybody is.    
    Dance like nobody is watching, code like everybody is.    
    Dance like nobody is watching, code like everybody is.</p>
</div>

2.1 利用flex布局（flex） ​

css
.parent { 
        height: 140px;
        display: flex;
        flex-direction: column;		//设置主轴纵向
        justify-content: center;	//主轴上元素居中
        border: 2px dashed #f69c55;
}

2.2 利用表布局（table） ​

利用表布局的vertical-align: middle可以实现子元素的垂直居中

css
.parent {
        display: table;
        height: 140px;
        border: 2px dashed #f69c55;
    }
.child {
        display: table-cell;
        vertical-align: middle;
}

3、块级元素垂直居中 ​

3.1 使用absolute+负margin(已知高度宽度) ​

css
<div class="parent">
    <div class="child">固定高度的块级元素垂直居中。</div>
</div>
.parent {
	position: relative;
}
.child {
    position: absolute;
    top: 50%;
    height: 100px;
    margin-top: -50px;
}

3.2 使用absolute+transform ​

当垂直居中的元素的高度和宽度未知时，可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。

css
<div class="parent">
    <div class="child">未知高度的块级元素垂直居中。</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

3.3 使用flex+align-items ​

通过设置flex布局中的属性align-items，使子元素垂直居中。

css
<div class="parent">
    <div class="child">未知高度的块级元素垂直居中。</div>
</div>
.parent {
    display:flex;
    align-items:center;
}

3.4 使用table-cell+vertical-align ​

通过将父元素转化为一个表格单元格显示（类似 <td> 和 <th>），再通过设置 vertical-align属性，使表格单元格内容垂直居中。

css
<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .parent {
    display: table-cell;
    vertical-align: middle;
  }
</style>