js 文字居中|极客笔记

js 文字居中

在网页开发中，文字的居中是一个常见的布局需求。通过CSS可以很容易地实现文本的水平和垂直居中。本文将详细讨论如何在网页中实现文字的居中显示。

水平居中

文本水平居中

要实现文本的水平居中，可以使用CSS中的text-align属性。将text-align设置为center即可让文本在其父元素中水平居中显示。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Centering</title>
<style>
    .center {
        text-align: center;
    }
</style>
</head>
<body>
<div class="center">
    <h1>This text is centered horizontally</h1>
</div>
</body>
</html>

元素水平居中

如果需要让一个元素水平居中显示，可以使用CSS中的margin属性。将元素的左右margin值设置为auto，即可让元素水平居中。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Element Centering</title>
<style>
    .center {
        width: 50%;
        margin: 0 auto;
        background-color: lightgray;
        text-align: center;
    }
</style>
</head>
<body>
<div class="center">
    <h1>This element is centered horizontally</h1>
</div>
</body>
</html>

垂直居中

单行文本垂直居中

要实现单行文本的垂直居中，可以使用CSS中的line-height属性。将line-height的值设置为与父元素高度相等即可实现单行文本的垂直居中。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Single Line Text Centering</title>
<style>
    .container {
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: lightgray;
    }
    .center {
        line-height: 300px;
    }
</style>
</head>
<body>
<div class="container">
    <span class="center">This is vertically centered text</span>
</div>
</body>
</html>

多行文本垂直居中

对于多行文本的垂直居中，可以使用flex布局或者table布局来实现。

使用flex布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multi Line Text Centering with Flex</title>
<style>
    .container {
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: lightgray;
        padding: 20px;
    }
    .center {
        text-align: center;
    }
</style>
</head>
<body>
<div class="container">
    <div class="center">
        <p>This is a paragraph with multiple lines of text. It is vertically centered using flexbox.</p>
    </div>
</div>
</body>
</html>

使用table布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multi Line Text Centering with Table</title>
<style>
    .container {
        display: table;
        width: 100%;
        height: 300px;
        background-color: lightgray;
    }
    .center {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
</style>
</head>
<body>
<div class="container">
    <div class="center">
        <p>This is a paragraph with multiple lines of text. It is vertically centered using table layout.</p>
    </div>
</div>
</body>
</html>