每日一个知识点：几分钟用多种方式实现Div的上下左右居中

Miracle_G
149 阅读4分钟

我将为你展示多种实现div居中的方法，每种方法都有其适用场景和特点。

实现思路

  1. 使用Flexbox布局（现代布局方案）

  2. 使用Grid布局（新兴的强大布局方案）

  3. 使用绝对定位和transform（传统但有效的方法）

  4. 使用绝对定位和负margin（需要知道元素尺寸）

  5. 使用table-cell布局（兼容性较好的传统方法）

  6. 使用margin:auto（简单块级元素居中）

下面是完整的实现代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Div居中方案大全</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        h1 {
            text-align: center;
            margin-bottom: 30px;
            color: #2c3e50;
            font-size: 2.5rem;
        }
        
        .description {
            text-align: center;
            margin-bottom: 40px;
            font-size: 1.1rem;
            color: #555;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .methods-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }
        
        .method {
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            padding: 20px;
            transition: transform 0.3s ease;
        }
        
        .method:hover {
            transform: translateY(-5px);
        }
        
        .method-title {
            font-size: 1.4rem;
            color: #3498db;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .parent {
            height: 200px;
            background-color: #eef2f7;
            border: 2px dashed #bbb;
            border-radius: 8px;
            margin-bottom: 15px;
            position: relative;
        }
        
        .child {
            width: 100px;
            height: 100px;
            background: linear-gradient(45deg, #3498db, #2980b9);
            border-radius: 6px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        
        /* 1. Flexbox 方法 */
        .flexbox {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        /* 2. Grid 方法 */
        .grid {
            display: grid;
            place-items: center;
        }
        
        /* 3. 绝对定位 + Transform */
        .absolute-transform {
            position: relative;
        }
        
        .absolute-transform .child {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        /* 4. 绝对定位 + 负Margin */
        .absolute-negative-margin {
            position: relative;
        }
        
        .absolute-negative-margin .child {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px; /* 元素高度的一半 */
            margin-left: -50px; /* 元素宽度的一半 */
        }
        
        /* 5. Table-Cell 方法 */
        .table-cell {
            display: table;
            width: 100%;
        }
        
        .table-cell .parent {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        
        .table-cell .child {
            display: inline-block;
        }
        
        /* 6. Margin Auto 方法 */
        .margin-auto .child {
            margin: 50px auto; /* 垂直方向需要计算 */
        }
        
        .code-block {
            background: #2d3e50;
            color: #f8f9fa;
            padding: 15px;
            border-radius: 6px;
            font-family: 'Fira Code', monospace;
            font-size: 0.9rem;
            overflow-x: auto;
            margin-top: 15px;
        }
        
        .pros-cons {
            margin-top: 15px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 6px;
            font-size: 0.9rem;
        }
        
        .pros {
            color: #27ae60;
        }
        
        .cons {
            color: #e74c3c;
        }
        
        .footer {
            text-align: center;
            margin-top: 40px;
            color: #7f8c8d;
        }
        
        @media (max-width: 768px) {
            .methods-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>多种方式实现Div居中</h1>
        <p class="description">在Web开发中，实现元素的居中是一个常见需求。下面展示了6种不同的方法来实现div的水平和垂直居中，每种方法都有其适用场景和优缺点。</p>
        
        <div class="methods-container">
            <!-- 方法1: Flexbox -->
            <div class="method">
                <h2 class="method-title">1. Flexbox 布局</h2>
                <div class="parent flexbox">
                    <div class="child">Flexbox</div>
                </div>
                <div class="code-block">
                    .parent {<br>
                    &nbsp;&nbsp;display: flex;<br>
                    &nbsp;&nbsp;justify-content: center;<br>
                    &nbsp;&nbsp;align-items: center;<br>
                    }
                </div>
                <div class="pros-cons">
                    <span class="pros">✓ 现代布局方案，简单灵活</span><br>
                    <span class="pros">✓ 内容动态大小时也能正常工作</span><br>
                    <span class="cons">✗ 兼容性：IE10+</span>
                </div>
            </div>
            
            <!-- 方法2: Grid -->
            <div class="method">
                <h2 class="method-title">2. Grid 布局</h2>
                <div class="parent grid">
                    <div class="child">Grid</div>
                </div>
                <div class="code-block">
                    .parent {<br>
                    &nbsp;&nbsp;display: grid;<br>
                    &nbsp;&nbsp;place-items: center;<br>
                    }
                </div>
                <div class="pros-cons">
                    <span class="pros">✓ 代码简洁，二维布局能力强</span><br>
                    <span class="cons">✗ 兼容性：IE不支持，现代浏览器支持良好</span>
                </div>
            </div>
            
            <!-- 方法3: 绝对定位 + Transform -->
            <div class="method">
                <h2 class="method-title">3. 绝对定位 + Transform</h2>
                <div class="parent absolute-transform">
                    <div class="child">Transform</div>
                </div>
                <div class="code-block">
                    .parent {<br>
                    &nbsp;&nbsp;position: relative;<br>
                    }<br>
                    .child {<br>
                    &nbsp;&nbsp;position: absolute;<br>
                    &nbsp;&nbsp;top: 50%;<br>
                    &nbsp;&nbsp;left: 50%;<br>
                    &nbsp;&nbsp;transform: translate(-50%, -50%);<br>
                    }
                </div>
                <div class="pros-cons">
                    <span class="pros">✓ 不需要知道元素尺寸</span><br>
                    <span class="pros">✓ 兼容性较好</span><br>
                    <span class="cons">✗ 绝对定位可能影响文档流</span>
                </div>
            </div>
            
            <!-- 方法4: 绝对定位 + 负Margin -->
            <div class="method">
                <h2 class="method-title">4. 绝对定位 + 负Margin</h2>
                <div class="parent absolute-negative-margin">
                    <div class="child">负Margin</div>
                </div>
                <div class="code-block">
                    .parent {<br>
                    &nbsp;&nbsp;position: relative;<br>
                    }<br>
                    .child {<br>
                    &nbsp;&nbsp;position: absolute;<br>
                    &nbsp;&nbsp;top: 50%;<br>
                    &nbsp;&nbsp;left: 50%;<br>
                    &nbsp;&nbsp;margin-top: -50px; /* 元素高度的一半 */<br>
                    &nbsp;&nbsp;margin-left: -50px; /* 元素宽度的一半 */<br>
                    }
                </div>
                <div class="pros-cons">
                    <span class="pros">✓ 兼容性好（包括旧版浏览器）</span><br>
                    <span class="cons">✗ 需要知道元素的尺寸</span><br>
                    <span class="cons">✗ 内容变化时需要调整margin</span>
                </div>
            </div>
            
            <!-- 方法5: Table-Cell -->
            <div class="method">
                <h2 class="method-title">5. Table-Cell 布局</h2>
                <div class="table-cell">
                    <div class="parent">
                        <div class="child">Table-Cell</div>
                    </div>
                </div>
                <div class="code-block">
                    .parent {<br>
                    &nbsp;&nbsp;display: table-cell;<br>
                    &nbsp;&nbsp;vertical-align: middle;<br>
                    &nbsp;&nbsp;text-align: center;<br>
                    }<br>
                    .child {<br>
                    &nbsp;&nbsp;display: inline-block;<br>
                    }
                </div>
                <div class="pros-cons">
                    <span class="pros">✓ 兼容性非常好（包括IE8+）</span><br>
                    <span class="cons">✗ 需要额外的标记或样式</span><br>
                    <span class="cons">✗ 不是为布局设计的语义化方案</span>
                </div>
            </div>
            
            <!-- 方法6: Margin Auto -->
            <div class="method">
                <h2 class="method-title">6. Margin Auto (需要计算)</h2>
                <div class="parent margin-auto">
                    <div class="child">Margin Auto</div>
                </div>
                <div class="code-block">
                    /* 水平居中 */<br>
                    .child {<br>
                    &nbsp;&nbsp;margin: 0 auto;<br>
                    }<br>
                    /* 垂直居中需要计算上方margin */<br>
                    .child {<br>
                    &nbsp;&nbsp;margin: 50px auto;<br>
                    }
                </div>
                <div class="pros-cons">
                    <span class="pros">✓ 简单块级元素水平居中</span><br>
                    <span class="cons">✗ 垂直居中需要计算，不灵活</span><br>
                    <span class="cons">✗ 内容变化时需要重新计算</span>
                </div>
            </div>
        </div>
        
        <div class="footer">
            <p>在实际项目中，推荐优先使用Flexbox或Grid布局实现居中，它们更灵活且符合现代Web标准。</p>
            <p>© 2025 Div居中方案演示</p>
        </div>
    </div>
</body>
</html>

运行效果如下：

各种方法的特点总结

  1. Flexbox布局 - 现代、灵活，适合大多数场景

  2. Grid布局 - 代码简洁，适合复杂二维布局

  3. 绝对定位+Transform - 兼容性好，不需要知道元素尺寸

  4. 绝对定位+负Margin - 兼容性最好，但需要知道元素尺寸

  5. Table-Cell布局 - 兼容旧浏览器，但不符合语义化

  6. Margin Auto - 只适合简单水平居中，垂直居中需要计算

使用建议

  • 现代项目：优先使用Flexbox或Grid

  • 需要兼容旧浏览器：考虑绝对定位+Transform或Table-Cell方法

  • 已知元素尺寸：可以使用绝对定位+负Margin方法

你可以直接将上述代码复制到HTML文件中运行，查看各种居中效果。

再提供一个运行效果如下：

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>六种方式实现Div居中布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            color: #333;
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            padding: 30px 0;
            color: white;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }
        
        header h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
        }
        
        header p {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }
        
        .content {
            display: flex;
            gap: 30px;
            margin-top: 20px;
        }
        
        .methods-nav {
            flex: 0 0 250px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        
        .methods-nav h2 {
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: #1a2a6c;
            text-align: center;
            padding-bottom: 10px;
            border-bottom: 2px solid #fdbb2d;
        }
        
        .method-list {
            list-style: none;
        }
        
        .method-item {
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
            background: #f8f9fa;
        }
        
        .method-item:hover {
            background: #e9ecef;
            transform: translateX(5px);
        }
        
        .method-item.active {
            background: #1a2a6c;
            color: white;
        }
        
        .demo-area {
            flex: 1;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        
        .demo-container {
            height: 400px;
            background: #e9ecef;
            border-radius: 10px;
            margin-bottom: 30px;
            position: relative;
            overflow: hidden;
            border: 2px dashed #6c757d;
        }
        
        .parent {
            width: 100%;
            height: 100%;
            position: relative;
            background: linear-gradient(45deg, #f8f9fa, #e9ecef);
        }
        
        .child {
            width: 200px;
            height: 150px;
            background: linear-gradient(135deg, #ff9a9e, #fad0c4);
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #333;
            font-weight: bold;
            font-size: 1.2rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            text-align: center;
            padding: 15px;
        }
		
		.child-inner{
			line-height:normal;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
		}
        
        .code-container {
            background: #2d3748;
            color: #cbd5e0;
            border-radius: 10px;
            padding: 20px;
            font-family: 'Consolas', monospace;
            font-size: 1rem;
            line-height: 1.6;
            overflow-x: auto;
        }
        
        .code-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            color: #fdbb2d;
        }
        
        .method-title {
            font-size: 1.5rem;
            font-weight: 600;
        }
        
        .method-desc {
            margin: 20px 0;
            line-height: 1.6;
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            border-left: 4px solid #1a2a6c;
        }
        
        .code-keyword {
            color: #63b3ed;
        }
        
        .code-selector {
            color: #f6ad55;
        }
        
        .code-property {
            color: #68d391;
        }
        
        .code-value {
            color: #f6e05e;
        }
        
        .code-comment {
            color: #a0aec0;
        }
        
        .pros-cons {
            display: flex;
            gap: 20px;
            margin-top: 20px;
        }
        
        .pros, .cons {
            flex: 1;
            padding: 15px;
            border-radius: 8px;
        }
        
        .pros {
            background: rgba(104, 211, 145, 0.15);
            border-left: 4px solid #68d391;
        }
        
        .cons {
            background: rgba(245, 101, 101, 0.15);
            border-left: 4px solid #f56565;
        }
        
        .pros h3, .cons h3 {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        
        .pros h3::before {
            content: "✓";
            margin-right: 8px;
            color: #68d391;
        }
        
        .cons h3::before {
            content: "⚠";
            margin-right: 8px;
            color: #f56565;
        }
        
        .pros ul, .cons ul {
            padding-left: 20px;
        }
        
        .pros li, .cons li {
            margin-bottom: 8px;
        }
        
        @media (max-width: 768px) {
            .content {
                flex-direction: column;
            }
            
            .methods-nav {
                flex: 0 0 auto;
                margin-bottom: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>六种方式实现Div居中布局</h1>
            <p>探索CSS中实现元素水平和垂直居中的多种方法，每种方法都有其适用场景和特点</p>
        </header>
        
        <div class="content">
            <nav class="methods-nav">
                <h2>居中方案</h2>
                <ul class="method-list">
                    <li class="method-item active" data-method="flex">Flexbox 布局</li>
                    <li class="method-item" data-method="grid">Grid 布局</li>
                    <li class="method-item" data-method="transform">Transform 变换</li>
                    <li class="method-item" data-method="margin">负Margin法</li>
                    <li class="method-item" data-method="table">表格布局</li>
                    <li class="method-item" data-method="line-height">行高法</li>
                </ul>
            </nav>
            
            <main class="demo-area">
                <div class="method-title">Flexbox 布局</div>
                
                <div class="method-desc">
                    Flexbox 是现代CSS布局的首选方案之一，通过 justify-content 和 align-items 属性可以轻松实现居中效果。
                </div>
                
                <div class="demo-container">
                    <div class="parent" id="demo-parent">
                        <div class="child">我是居中的元素<br>使用Flexbox实现</div>
                    </div>
                </div>
                
                <div class="code-container">
                    <div class="code-header">
                        <span>CSS 代码</span>
                    </div>
                    <pre><code><span class="code-selector">.parent</span> {
    <span class="code-keyword">display</span>: <span class="code-value">flex</span>;
    <span class="code-keyword">justify-content</span>: <span class="code-value">center</span>; <span class="code-comment">/* 水平居中 */</span>
    <span class="code-keyword">align-items</span>: <span class="code-value">center</span>; <span class="code-comment">/* 垂直居中 */</span>
}

<span class="code-selector">.child</span> {
    <span class="code-comment">/* 子元素不需要特殊样式 */</span>
}</code></pre>
                </div>
                
                <div class="pros-cons">
                    <div class="pros">
                        <h3>优点</h3>
                        <ul>
                            <li>代码简洁，易于理解</li>
                            <li>响应式布局友好</li>
                            <li>现代浏览器广泛支持</li>
                            <li>不需要知道子元素尺寸</li>
                        </ul>
                    </div>
                    
                    <div class="cons">
                        <h3>缺点</h3>
                        <ul>
                            <li>IE10及以下不支持</li>
                            <li>在某些旧移动浏览器中可能需要前缀</li>
                        </ul>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const methods = document.querySelectorAll('.method-item');
            const demoParent = document.getElementById('demo-parent');
            const methodTitle = document.querySelector('.method-title');
            const methodDesc = document.querySelector('.method-desc');
            const codeContainer = document.querySelector('.code-container pre code');
            
            const methodData = {
                flex: {
                    title: "Flexbox 布局",
                    desc: "Flexbox 是现代CSS布局的首选方案之一，通过 justify-content 和 align-items 属性可以轻松实现居中效果。",
                    css: `<span class="code-selector">.parent</span> {
    <span class="code-keyword">display</span>: <span class="code-value">flex</span>;
    <span class="code-keyword">justify-content</span>: <span class="code-value">center</span>; <span class="code-comment">/* 水平居中 */</span>
    <span class="code-keyword">align-items</span>: <span class="code-value">center</span>; <span class="code-comment">/* 垂直居中 */</span>
}

<span class="code-selector">.child</span> {
    <span class="code-comment">/* 子元素不需要特殊样式 */</span>
}`,
                    style: function() {
                        demoParent.style.display = 'flex';
                        demoParent.style.justifyContent = 'center';
                        demoParent.style.alignItems = 'center';
                    },
                    pros: [
                        "代码简洁，易于理解",
                        "响应式布局友好",
                        "现代浏览器广泛支持",
                        "不需要知道子元素尺寸"
                    ],
                    cons: [
                        "IE10及以下不支持",
                        "在某些旧移动浏览器中可能需要前缀"
                    ]
                },
                grid: {
                    title: "Grid 布局",
                    desc: "CSS Grid 是另一种现代布局方案，通过 place-items 属性可以轻松实现居中效果。",
                    css: `<span class="code-selector">.parent</span> {
    <span class="code-keyword">display</span>: <span class="code-value">grid</span>;
    <span class="code-keyword">place-items</span>: <span class="code-value">center</span>; <span class="code-comment">/* 同时设置水平和垂直居中 */</span>
}

<span class="code-selector">.child</span> {
    <span class="code-comment">/* 子元素不需要特殊样式 */</span>
}`,
                    style: function() {
                        demoParent.style.display = 'grid';
                        demoParent.style.placeItems = 'center';
                    },
                    pros: [
                        "代码极其简洁（一行解决）",
                        "二维布局能力强大",
                        "现代浏览器广泛支持",
                        "不需要知道子元素尺寸"
                    ],
                    cons: [
                        "IE完全不支持",
                        "移动端支持不如Flexbox广泛"
                    ]
                },
                transform: {
                    title: "Transform 变换",
                    desc: "使用绝对定位结合 transform 属性实现居中，不需要知道元素的具体尺寸。",
                    css: `<span class="code-selector">.parent</span> {
    <span class="code-keyword">position</span>: <span class="code-value">relative</span>;
}

<span class="code-selector">.child</span> {
    <span class="code-keyword">position</span>: <span class="code-value">absolute</span>;
    <span class="code-keyword">top</span>: <span class="code-value">50%</span>;
    <span class="code-keyword">left</span>: <span class="code-value">50%</span>;
    <span class="code-keyword">transform</span>: <span class="code-value">translate(-50%, -50%)</span>;
}`,
                    style: function() {
                        demoParent.style.display = 'block';
                        demoParent.style.position = 'relative';
                        
                        const child = demoParent.querySelector('.child');
                        child.style.position = 'absolute';
                        child.style.top = '50%';
                        child.style.left = '50%';
                        child.style.transform = 'translate(-50%, -50%)';
                    },
                    pros: [
                        "不需要知道元素尺寸",
                        "兼容性较好（IE9+）",
                        "适用于各种尺寸元素",
                        "不会影响其他布局"
                    ],
                    cons: [
                        "使用绝对定位，脱离文档流",
                        "transform可能影响其他变换效果",
                        "在旧版浏览器中可能需要前缀"
                    ]
                },
                margin: {
                    title: "负Margin法",
                    desc: "传统居中方法，需要知道子元素的具体尺寸，通过负margin实现居中。",
                    css: `<span class="code-selector">.parent</span> {
    <span class="code-keyword">position</span>: <span class="code-value">relative</span>;
}

<span class="code-selector">.child</span> {
    <span class="code-keyword">position</span>: <span class="code-value">absolute</span>;
    <span class="code-keyword">top</span>: <span class="code-value">50%</span>;
    <span class="code-keyword">left</span>: <span class="code-value">50%</span>;
    <span class="code-keyword">width</span>: <span class="code-value">200px</span>; <span class="code-comment">/* 需要指定宽度 */</span>
    <span class="code-keyword">height</span>: <span class="code-value">150px</span>; <span class="code-comment">/* 需要指定高度 */</span>
    <span class="code-keyword">margin-top</span>: <span class="code-value">-75px</span>; <span class="code-comment">/* 高度的一半 */</span>
    <span class="code-keyword">margin-left</span>: <span class="code-value">-100px</span>; <span class="code-comment">/* 宽度的一半 */</span>
}`,
                    style: function() {
                        demoParent.style.display = 'block';
                        demoParent.style.position = 'relative';
                        
                        const child = demoParent.querySelector('.child');
                        child.style.position = 'absolute';
                        child.style.top = '50%';
                        child.style.left = '50%';
                        child.style.marginTop = '-75px';
                        child.style.marginLeft = '-100px';
                    },
                    pros: [
                        "兼容性非常好（IE6+）",
                        "实现原理直观易懂",
                        "不需要CSS3支持"
                    ],
                    cons: [
                        "需要知道子元素的具体尺寸",
                        "尺寸改变时需要同步修改margin值",
                        "使用绝对定位，脱离文档流"
                    ]
                },
                table: {
                    title: "表格布局",
                    desc: "使用表格的 vertical-align 属性实现居中，是一种较传统的居中方法。",
                    css: `<span class="code-selector">.parent</span> {
    <span class="code-keyword">display</span>: <span class="code-value">table-cell</span>;
    <span class="code-keyword">text-align</span>: <span class="code-value">center</span>; <span class="code-comment">/* 水平居中 */</span>
    <span class="code-keyword">vertical-align</span>: <span class="code-value">middle</span>; <span class="code-comment">/* 垂直居中 */</span>
}

<span class="code-selector">.child</span> {
    <span class="code-keyword">display</span>: <span class="code-value">inline-block</span>;
}`,
                    style: function() {
					
						demoParent.parentNode.style.display = "table";
						demoParent.parentNode.style.width = "100%";
                        demoParent.style.display = 'table-cell';
                        demoParent.style.textAlign = 'center';
                        demoParent.style.verticalAlign = 'middle';
                        
                        const child = demoParent.querySelector('.child');
                        child.style.display = 'inline-block';
                    },
                    pros: [
                        "兼容性好（IE8+）",
                        "不需要知道元素尺寸",
                        "实现相对简单"
                    ],
                    cons: [
                        "需要将父元素设置为table-cell",
                        "可能影响其他布局",
                        "不是语义化的表格使用"
                    ]
                },
                "line-height": {
                    title: "行高法",
                    desc: "适用于单行文本或行内元素的简单居中方法，通过设置行高等于容器高度实现垂直居中。",
                    css: `<span class="code-selector">.parent</span> {
    <span class="code-keyword">text-align</span>: <span class="code-value">center</span>; <span class="code-comment">/* 水平居中 */</span>
}

<span class="code-selector">.child</span> {
    <span class="code-keyword">display</span>: <span class="code-value">inline-block</span>;
    <span class="code-keyword">line-height</span>: <span class="code-value">400px</span>; <span class="code-comment">/* 等于父容器高度 */</span>
    <span class="code-keyword">vertical-align</span>: <span class="code-value">middle</span>;
}

<span class="code-comment">/* 如果内部有文本，需要额外元素 */</span>
<span class="code-selector">.child-inner</span> {
    <span class="code-keyword">line-height</span>: <span class="code-value">normal</span>;
    <span class="code-keyword">display</span>: <span class="code-value">inline-block</span>;
    <span class="code-keyword">vertical-align</span>: <span class="code-value">middle</span>;
}`,
                    style: function() {
                        demoParent.style.display = 'block';
                        demoParent.style.textAlign = 'center';
                        demoParent.style.lineHeight = '400px';
                        
                        const child = demoParent.querySelector('.child');
                        child.style.display = 'inline-block';
                        child.style.lineHeight = '400px';
                        child.style.verticalAlign = 'middle';
                        child.innerHTML = '<div class="child-inner">我是居中的元素<br>使用行高法实现</div>';
                    },
                    pros: [
                        "实现简单",
                        "兼容性非常好",
                        "适用于单行文本"
                    ],
                    cons: [
                        "需要知道父容器高度",
                        "多行文本需要额外处理",
                        "不适用于块级元素",
                        "容器高度变化时需要调整"
                    ]
                }
            };
            
            // 初始化默认方案
            applyMethod('flex');
            
            // 添加事件监听
            methods.forEach(method => {
                method.addEventListener('click', function() {
                    methods.forEach(m => m.classList.remove('active'));
                    this.classList.add('active');
                    
                    const methodName = this.getAttribute('data-method');
                    applyMethod(methodName);
                });
            });
            
            // 应用居中方法
            function applyMethod(methodName) {
                const method = methodData[methodName];
                
                // 重置样式
                demoParent.style = '';
				demoParent.parentNode.style = '';
                const child = demoParent.querySelector('.child');
                child.style = '';
                child.innerHTML = methodName === 'line-height' 
                    ? "我是居中的元素<br>使用行高法实现" 
                    : "我是居中的元素<br>使用" + method.title + "实现";
                
                // 应用新样式
                method.style();
                
                // 更新内容
                methodTitle.textContent = method.title;
                methodDesc.textContent = method.desc;
                codeContainer.innerHTML = method.css;
                
                // 更新优缺点
                const prosList = document.querySelector('.pros ul');
                const consList = document.querySelector('.cons ul');
                
                prosList.innerHTML = method.pros.map(p => `<li>${p}</li>`).join('');
                consList.innerHTML = method.cons.map(c => `<li>${c}</li>`).join('');
            }
        });
    </script>
</body>
</html>

自己运行看看效果，行胜于言，慢慢积累，终有所成。

avatar
文章
阅读
粉丝