css div内容居中

CSS Div内容居中

基础概念

CSS（层叠样式表）是一种用于描述HTML文档样式的语言。div 是HTML中的一个块级元素，常用于布局和分组其他HTML元素。内容居中是指将div内的内容（文本、图片等）在水平和垂直方向上居中对齐。

类型

CSS提供了多种方法来实现div内容的居中：

水平居中：
- 使用 text-align: center; 对文本进行水平居中。
- 使用 margin: 0 auto; 对块级元素进行水平居中（需要设置宽度）。

垂直居中：
- 使用 display: flex; 和 align-items: center; 对Flexbox容器内的元素进行垂直居中。
- 使用 display: grid; 和 align-items: center; 对Grid容器内的元素进行垂直居中。
- 使用 position: absolute; 和 top: 50%; left: 50%; transform: translate(-50%, -50%); 对绝对定位的元素进行垂直居中。
水平和垂直居中：
- 使用 display: flex; 和 justify-content: center; align-items: center; 对Flexbox容器内的元素进行水平和垂直居中。
- 使用 display: grid; 和 place-items: center; 对Grid容器内的元素进行水平和垂直居中。

应用场景

网页布局：在首页、产品页面等需要统一布局的地方。
表单设计：在登录表单、注册表单等需要用户输入的地方。
图片展示：在图片库、轮播图等需要展示图片的地方。

示例代码

以下是一个使用Flexbox实现div内容水平和垂直居中的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Div Center Example</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .centered-div {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="centered-div">
            <h1>Hello, World!</h1>
            <p>This is a centered div.</p>
        </div>
    </div>
</body>
</html>