css垂直居中的方法（CSS 设置垂直居中）

目录

一  
  
  
  
  
  
  
  、设置文字垂直居中

1 
  
  
  
  
  
  
  
 、line-height 使文字垂直居中

2


 


 


 


 


 


 


 


、flex布局 使文字垂直居中

3 
 
 
 
 
 
 
 、使用display和vertical-align 使文字垂直居中

二  
   
   
   
   
   
   
   
 、设置块状元素垂直居中

1

 

 

 

 

 

 

 

、使用绝对定位和transform 使块状元素垂直居中（未知块状元素高度）

2
 

 

 

 

 

 

 

 、使用flex布局 使块状元素垂直居中（未知块状元素高度）

3                、使用绝对定位和margin 使块状元素垂直居中（已知块状元素高度）

4
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

、使用padding 使块状元素垂直居中（已知元素高度）

5














、使用grid布局 使块状元素垂直居中（未知元素高度）

6                        、使用伪元素:before 使块状元素垂直居中（未知元素高度）

一
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
、设置文字垂直居中

1






















、line-height 使文字垂直居中

<template> <div class="container"> line-height 使文字垂直居中 </div> </template> <style> .container{ margin: 20px 0px; width: 100%; height: 100px; line-height: 100px; background-color: pink; } </style>

2                、flex布局 使文字垂直居中

<template> <div class="container"> flex布局 使文字垂直居中 </div> </template> <style> .container{ margin: 20px 0px; width: 100%; height: 100px; display: flex; align-items: center; background-color: pink; } </style>

3
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 、使用display和vertical-align 使文字垂直居中

3.1 display: table和vertical-align: middle

<template> <div class="parent"> <div class="child"> <div>使用display和vertical-align 使文字垂直居中</div> <div>使用display和vertical-align 使文字垂直居中</div> </div> </div> </template> <style> .parent { display: table; width: 100%; height: 100px; background-color: skyblue; } .child { display: table-cell; vertical-align: middle; background-color: pink; } </style>

3.2 display: table-cell和vertical-align: middle 

<template> <div class="parent"> <div class="child"> <div>使用display和vertical-align 使文字垂直居中</div> <div>使用display和vertical-align 使文字垂直居中</div> </div> </div> </template> <style> .parent { width: 100%; height: 100px; background-color: skyblue; display: table-cell; vertical-align: middle; } .child { background-color: pink; } </style>

二















、设置块状元素垂直居中

1  
  
  
  
  
  
  
  、使用绝对定位和transform 使块状元素垂直居中（未知块状元素高度）

<template> <div class="parent"> <div class="child"> <div> 使用绝对定位和transform 使块状元素垂直居中 </div> <div> 使用绝对定位和transform 使块状元素垂直居中 </div> </div> </div> </template> <style> .parent { width: 100%; height: 100vh; background-color: skyblue; } .child { width: 100%; position: absolute; top: 50%; transform: translate(0, -50%); background-color: pink; } </style>

2 
  
  
  
  
  
  
  
 、使用flex布局 使块状元素垂直居中（未知块状元素高度）

2.1 display: flex和align-items: center

<template> <div class="parent"> <div class="child"> <div> 使用flex布局 使块状元素垂直居中 </div> <div> 使用flex布局 使块状元素垂直居中 </div> </div> </div> </template> <style> .parent { width: 100%; height: 100vh; display: flex; align-items: center; background-color: skyblue; } .child { width: 100%; background-color: pink; } </style>

2.2 display: flex和align-self: center

<template> <div class="parent"> <div class="child"> <div> 使用flex布局 使块状元素垂直居中 </div> <div> 使用flex布局 使块状元素垂直居中 </div> </div> </div> </template> <style> .parent { width: 100%; height: 100vh; display: flex; background-color: skyblue; } .child { align-self: center; width: 100%; background-color: pink; } </style>

3


 


 


 


 


 


 


 


、使用绝对定位和margin 使块状元素垂直居中（已知块状元素高度）

3.1 绝对定位和margin: auto

<template> <div class="parent"> <div class="child"> <div> 使用绝对定位和margin 使块状元素垂直居中 </div> <div> 使用绝对定位和margin 使块状元素垂直居中 </div> </div> </div> </template> <style> .parent { width: 100%; height: 100vh; background-color: skyblue; } .child { width: 100%; height: 100px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-color: pink; } </style>

3.2 绝对定位和margin-top

<template> <div class="parent"> <div class="child"> <div> 使用绝对定位和margin 使块状元素垂直居中 </div> <div> 使用绝对定位和margin 使块状元素垂直居中 </div> </div> </div> </template> <style> .parent { width: 100%; height: 100vh; background-color: skyblue; position: relative; } .child { width: 100%; height: 100px; position: absolute; top: 50%; margin-top: -50px;/* 高度的一半 */ background-color: pink; } </style>

4 
 
 
 
 
 
 
 、使用padding 使块状元素垂直居中（已知元素高度）

<template> <div class="parent"> <div class="child"> <div>使用padding 使块状元素垂直居中</div> <div>使用padding 使块状元素垂直居中</div> </div> </div> </template> <style> .parent { width: 100%; height: 300px; background-color: skyblue; padding: 100px 0; box-sizing: border-box; } .child { position: relative; width: 100%; height: 100px; background-color: pink; } </style>

5  
   
   
   
   
   
   
   
 、使用grid布局 使块状元素垂直居中（未知元素高度）

<template> <div class="parent"> <div class="child"> <div> 使用grid布局 使块状元素垂直居中 </div> <div> 使用grid布局 使块状元素垂直居中 </div> </div> </div> </template> <style> .parent { width: 100%; height: 100vh; display: grid; background-color: skyblue; } .child { align-self: center; width: 100%; background-color: pink; } </style>

6

 

 

 

 

 

 

 

、使用伪元素:before 使块状元素垂直居中（未知元素高度）

<template> <div class="parent"> <div class="child"> <div> 使用伪元素:before 使块状元素垂直居中 </div> <div> 使用伪元素:before 使块状元素垂直居中 </div> </div> </div> </template> <style> .parent { width: 100%; height: 100px; display: block; background-color: skyblue; } .parent:before { content: ; height: 100%; display: inline-block; vertical-align: middle; } .child { width: 100%; display: inline-block; vertical-align: middle; background-color: pink; } </style>