css实现垂直居中的几种方法

南桥追光

于 2019-06-16 08:53:01 发布

阅读量206

点赞数

CC 4.0 BY-SA版权

分类专栏：小问题解决文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_34122822/article/details/92363390

小问题解决专栏收录该内容

34 篇文章

订阅专栏

本文详细介绍了三种不同的网页元素居中方法：绝对定位、弹性盒子（Flexbox）及表格布局（Table）。每种方法均有其独特的优势和适用场景，通过实际代码示例，读者可以深入理解如何在不同情况下选择最合适的布局策略。

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

绝对定位

<style>
    .content{
        position: absolute;
        top: 50%;
        left:50%;
        transform: translate(-50%, -50%);

        background: #123;
        width: 100px;
        height: 100px;
    }
    .father{
        position: relative;
        border:1px solid #543434;
        height: 500px;
    }
</style>
<body>
    <div class="father">    
        <div class="content">   

        </div>
    </div>
	
</body>

弹性盒子

<style>
    .content{
        background: #123456;
        width: 100px;
        height: 100px;
    }
    .father{
        border:1px solid #543434;
        height: 500px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
<body>
    <div class="father">    
        <div class="content">   

        </div>
    </div>
	
</body>

table布局

<style>
    .father{
        border:1px solid #543434;
        height: 500px;
        width: 500px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

    .content{
        background: #123456;
        width: 100px;
        height: 100px;
        display: inline-block;
    }
</style>
<body>
    <div class="father">    
        <div class="content">   

        </div>
    </div>
	
</body>