归纳HTML中上下左右居中对齐5个方式6个方法（postion2个方式、display：flex、grid、table-cell3个方式和flex、grid、table-cell属性详解）

最新推荐文章于 2026-04-04 02:32:02 发布

原创

最新推荐文章于 2026-04-04 02:32:02 发布 · 2.4w 阅读

标签

#、HTML实现居中对齐所有方法 #HTML实现居中对齐的6中方法 #display：table详解 #display：flex详解 #display：grid详解

收录于

本文介绍了五种常用的网页元素居中布局技巧，包括绝对定位、Flex布局、Grid布局等方法，并提供了详细的代码示例。

该文章已生成可运行项目，

display:table-cell、vertical-align:middle属性详解

HTML文本

<div class="parent">
    <div class="child"></div>
</div>

显示效果

方式1

设置position：absolute，top、bottom、right、left=0，margin：auto。

通过设置相对定位4个方向为0并将margin设置为auto使其自动平分上下左右的间距。

.parent {
    width: 300px;
    height: 300px;
    background-color: #ddd;
    position:relative;
    
}
.child {
    position: absolute;
    background-color:red;
     /*竖直方向居中*/
     top: 0;
    bottom: 0;
    /*水平方向居中*/
    left: 0;
    right:0;
    margin: auto;
	/*行内文本居中*/
    width: 100px;
    height: 100px;
    line-height: 100px;
}

本文章已经生成可运行项目