CSS代码让按钮居中|极客教程

CSS代码让按钮居中

在网页设计中，按钮是非常常见的元素，如何让按钮居中是一个常见的需求。在本文中，我们将介绍一些CSS代码，让按钮在不同情况下居中显示。

1. 水平居中

1.1 使用text-align属性

<!DOCTYPE html>
<html>
<head>
    <style>
        .center {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="center">
        <button>按钮</button>
    </div>
</body>
</html>

Output:

CSS代码让按钮居中

1.2 使用margin属性

<!DOCTYPE html>
<html>
<head>
    <style>
        .center {
            margin: 0 auto;
            display: block;
        }
    </style>
</head>
<body>
    <button class="center">按钮</button>
</body>
</html>

Output:

CSS代码让按钮居中

2. 垂直居中

2.1 使用line-height属性

<!DOCTYPE html>
<html>
<head>
    <style>
        button {
            line-height: 50px;
        }
    </style>
</head>
<body>
    <button>按钮</button>
</body>
</html>

Output:

CSS代码让按钮居中

2.2 使用flex布局

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
    </style>
</head>
<body>
    <div class="container">
        <button>按钮</button>
    </div>
</body>
</html>

Output:

CSS代码让按钮居中

3. 水平垂直居中

3.1 使用flex布局

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
    </style>
</head>
<body>
    <div class="container">
        <button>按钮</button>
    </div>
</body>
</html>

Output:

CSS代码让按钮居中

3.2 使用绝对定位和transform属性

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            position: relative;
            height: 100vh;
        }
        button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="container">
        <button>按钮</button>
    </div>
</body>
</html>

Output:

CSS代码让按钮居中

4. 多个按钮居中

4.1 使用flex布局

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
    </div>
</body>
</html>

Output:

CSS代码让按钮居中

4.2 使用grid布局

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
    </div>
</body>
</html>