HTML与CSS中居中对齐的方式大全

第一种方式

[css] ：

.parent{width: 300px;height: 300px;background: #ddd;/*display: table;*/display: table-cell;vertical-align: middle;text-align: center;
}.child{display: inline-block;/* 水平居中对齐 */margin: 0 auto;
}

HTML：

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

第二种方式

[css] ：

.parent{				position: relative;height: 400px;width: 400px;border: 1px solid red;}.child{						 position: absolute;left:50%;top:50%;border: 1px solid blue;height: 150px;width: 150px;transform:translate(-50%, -50%);
}

HTML：

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

第三种方式

[css] ：

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

第四种方式

[css] ：

.parent{display: flex; align-items: center;justify-content: center;
}

HTML：

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

/**祝各位博主与程序员们10.24程序员节要过的开开心心，累并充实着哦?~*/