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程序员节要过的开开心心，累并充实着哦?~*/
