divボックスの中央揃え

1:要素の幅が固定されている場合、cssはtop:50%のスタイルを指定します.left : 50 % ;
一方、margin-topとmargin-leftは負数として指定され、絶対値は自身の幅の半分である.
参照例は次のとおりです.

< !DOCTYPE html >
< html >
< head >
< title >             <  / title >
< style >
.content {
	width : 400px;
	height : 300px;
	position : absolute;
	left : 50 % ;
	top : 50 % ;
	margin - left : -200px;
	margin - top : -150px;
	background - color :  # 8888CC;
}
<  / style >
<  / head >
< body >
< div class = "content" >
	 < p >           <  / p >
<  / div >
<  / body >
<  / html >

2:もし私たちの高さが固定されていなかったら?
このときtranslate(x,y)を使うといいですが、x,yはオフセット量を表し、何パーセントで表すことができます.例は以下の通りです.

.white_content {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	height: auto;
	width: 500px;
	transform:translate(-50%,-50%);
	padding: 16px;
	border: 16px solid #52a3e2;
	background-color: white;
	z-index: 1002;
	overflow: auto;
}