元素水平垂直居中

最新推荐文章于 2025-06-16 16:15:00 发布

原创最新推荐文章于 2025-06-16 16:15:00 发布 · 369 阅读

0 ·

CC 4.0 BY-SA版权

html css 专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了如何使用CSS实现元素在父容器中水平和垂直居中的多种方法，包括使用Flexbox布局、CSS Grid、绝对定位、display: table等技巧，帮助开发者在不同场景下选择合适的方法进行页面布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中示例</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>
        /*可行，支持ie8*/
        .block1{text-align:center;border:1px solid red;height:600px; }
        .block1:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-0.25em;}
        .center1{display:inline-block;vertical-align:middle;max-width: 90%;background-color:#00bcd4;}

        /*不支持ie8*/
        .block2{text-align:center;border:1px solid blue;position:relative;height:600px;}
        .center2{position:absolute;top:50%;left:50%;background-color:#000;transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%)}

        /*此效果不行----这个看似居中了，实际没有，宽度跟父类一样,且不支持ie8*/
        .block3{display:table;width:100%;height:600px;border:1px solid blue;}
        .center3{display:table-cell;text-align:center;vertical-align:middle;background-color: #b6c7c0}

    </style>
</head>
<body>
<div class="block1">
    <div class="center1">
            <h4>标题标题标题</h4>
            <a href="#"><img src="http://www.51detao.com/images/home/guide/guide1.png" alt="..."></a>
            <div class="intro">简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</div>
    </div>
</div>
<div class="block2">
    <div class="center2">
        <h4>标题标题标题</h4>
        <a href="#"><img src="http://www.51detao.com/images/home/guide/guide1.png" alt="..."></a>
        <div class="intro">简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</div>
    </div>
</div>
<div class="block3">
    <div class="center3">
        <h4>标题标题标题</h4>
        <a href="#"><img src="http://www.51detao.com/images/home/guide/guide1.png" alt="..."></a>
        <div class="intro">简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</div>
    </div>
</div>
</body>
</html>