CSS vertical-align垂直居中|极客教程

CSS vertical-align垂直居中

在网页开发中，垂直居中是一个常见的需求，但实现起来却并不那么简单。本文将介绍几种常见的CSS垂直居中方法，帮助你轻松实现垂直居中效果。

1. 使用line-height属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vertical Align with line-height</title>
<style>
    .container {
        height: 200px;
        line-height: 200px;
        text-align: center;
    }
</style>
</head>
<body>
<div class="container">Vertical Align with line-height</div>
</body>
</html>

代码运行结果:

CSS vertical-align垂直居中

2. 使用flex布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vertical Align with flexbox</title>
<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
    }
</style>
</head>
<body>
<div class="container">Vertical Align with flexbox</div>
</body>
</html>

代码运行结果:

CSS vertical-align垂直居中

3. 使用table-cell布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vertical Align with table-cell</title>
<style>
    .container {
        display: table;
        height: 200px;
        width: 100%;
    }
    .content {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
</style>
</head>
<body>
<div class="container">
    <div class="content">Vertical Align with table-cell</div>
</div>
</body>
</html>

代码运行结果:

CSS vertical-align垂直居中

4. 使用position属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vertical Align with position</title>
<style>
    .container {
        position: relative;
        height: 200px;
    }
    .content {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        text-align: center;
    }
</style>
</head>
<body>
<div class="container">
    <div class="content">Vertical Align with position</div>
</div>
</body>
</html>

代码运行结果:

CSS vertical-align垂直居中

5. 使用grid布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vertical Align with grid</title>
<style>
    .container {
        display: grid;
        place-items: center;
        height: 200px;
    }
</style>
</head>
<body>
<div class="container">Vertical Align with grid</div>
</body>
</html>

代码运行结果:

CSS vertical-align垂直居中

6. 使用transform属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vertical Align with transform</title>
<style>
    .container {
        height: 200px;
        position: relative;
    }
    .content {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        text-align: center;
    }
</style>
</head>
<body>
<div class="container">
    <div class="content">Vertical Align with transform</div>
</div>
</body>
</html>

代码运行结果:

CSS vertical-align垂直居中

7. 使用伪元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vertical Align with pseudo-element</title>
<style>
    .container {
        height: 200px;
        position: relative;
    }
    .content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
</head>
<body>
<div class="container">
    <div class="content">Vertical Align with pseudo-element</div>
</div>
</body>
</html>

代码运行结果:

CSS vertical-align垂直居中

8. 使用calc()函数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vertical Align with calc()</title>
<style>
    .container {
        height: 200px;
        position: relative;
    }
    .content {
        position: absolute;
        top: calc(50% - 10px);
        left: calc(50% - 50px);
    }
</style>
</head>
<body>
<div class="container">
    <div class="content">Vertical Align with calc()</div>
</div>
</body>
</html>

代码运行结果:

CSS vertical-align垂直居中

9. 使用vertical-align属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vertical Align with vertical-align</title>
<style>
    .container {
        height: 200px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
</style>
</head>
<body>
<div class="container">Vertical Align with vertical-align</div>
</body>
</html>

代码运行结果:

CSS vertical-align垂直居中

10. 使用align-self属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vertical Align with align-self</title>
<style>
    .container {
        display: flex;
        height: 200px;
    }
    .content {
        align-self: center;
        margin: auto;
    }
</style>
</head>
<body>
<div class="container">
    <div class="content">Vertical Align with align-self</div>
</div>
</body>
</html>