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

目录

HTML文本

 显示效果

方式1

方式2(2种)

方式3

display:flex属性详解

方式4

display:grid属性详解

方式5

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


HTML文本

 显示效果

归纳HTML中上下左右居中对齐5个方式6个方法(postion2个方式、display:flex、grid、table-cell3个方式和flex、grid、table-cell属性详解)_第1张图片

方式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的博客-CSDN博客_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的博客-CSDN博客

.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;属性含义见下面链接

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

CSS中vertical-align和text-align属性详解(使用场景、举例、注意点)、display:table-cell使用详解(基础介绍和使用例子)。_AIWWY的博客-CSDN博客

你可能感兴趣的:(CSS,HTML实现居中对齐所有方法,HTML实现居中对齐的6中方法,display:table详解,display:flex详解,display:grid详解)