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

最新推荐文章于 2025-03-03 12:04:44 发布

YF-SOD

最新推荐文章于 2025-03-03 12:04:44 发布

阅读量2.4w

点赞数 11

分类专栏： CSS 文章标签：、HTML实现居中对齐所有方法 HTML实现居中对齐的6中方法 display：table详解 display：flex详解 display：grid详解

本文链接：https://blog.youkuaiyun.com/AIWWY/article/details/113930746

版权

CSS 专栏收录该内容

17 篇文章

订阅专栏

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;
}

方式2（2种）

position：absolute ，top=left=50%-1/2h（w）

使用相对父集定位，因为子元素是以左上角顶点为定位点所以要减去自身1/2的宽高，我们可以通过calc计算也可以通过transform属性去平移。

.parent {
    width: 300px;
    height: 300px;
    background-color: #ddd;
    position:relative;
    
}
.child {
    position: absolute;
    /*方法一*/
    left: calc(50% - 50px);
    top: calc(50% - 50px);
    /*方法二*/
    /* top: 50%;
    left: 50%;
    transform: translate(-50%,-50%); */
    background-color:red;
    width: 100px;
    height: 100px;
    line-height: 100px;
}

注意：clac函数可以使用百分比和像素计算，但是中间的符号2边要带空格，不然无法生效。

方式3

使用display：flex属性

设置主轴和副轴方向对齐方式为居中。详细解释见下面链接：

display：flex属性详解

flex布局（display:flex详解，容器的属性详解（主轴排列方式和对齐方式、换行、副轴和多根副轴对齐方向）、子元素属性详解（排列顺序、压缩放大计算方式、独立对齐、margin改变））_AIWWY的博客-优快云博客_display两端对齐属性

.parent {
    width: 300px;
    height: 300px;
    background-color: #ddd;
    display: flex; 
	align-items: center;
	justify-content: center;
}
.child {
    background-color:red;
    width: 100px;
    height: 100px;
    line-height: 100px;
}

方式4

使用display：grid属性

不划分单元格，相当于大容器parent为一个大的单元格，设置单元格主轴和副轴方向对齐方式为居中。详细解释见下面链接：

display：grid属性详解

grid布局介绍（容器、项目、网格线、单元格、容器和项目属性template-columns|rows相关函数和相关关键字\gap\areas\flow\content\justify\align）_AIWWY的博客-优快云博客

.parent {
    width: 300px;
    height: 300px;
    background-color: #ddd;
    display: grid; 
	align-items: center;
	justify-content: center;
}
.child {
    background-color:red;
    width: 100px;
    height: 100px;
    line-height: 100px;
}

方式5

使用display：table-cell属性

.parent {
    width: 300px;
    height: 300px;
    background-color: #ddd;
    /*display: table;*/
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    
}

.child {
    display: inline-block;
    /* 水平居中对齐 */
    background-color:red;
    /* margin: 0 auto; */
    width: 100px;
    height: 100px;
    line-height: 100px;
    
}

注意：display:inline-block;和margin: 0 auto;只用一个即可。

display:table-cell;vertical-align:middle;text-align: center;属性含义见下面链接