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

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