HTMLは、要素は水平方向、垂直方向に4つの方法を中心に

  垂直要素、水平センタリング2例：固定要素の大きさは、第二は、素子サイズが固定されていません

A.寸法

方法1：位置決め、50％、負のマージン

 

{■はの
幅400ピクセル、
高さ300ピクセルによって;
ボーダー：黒ベタ2ピクセル、
要素* /へ/ *位置決め要素
位置：絶対;
/ *左％* 50 /いるから素子に
左：50％;
トップ：50％
/ *要素左マージンを作るには、要素の幅と高さのマージンは1/2音符* /からの負のマージンであり
; -150pxマージントップ
マージン左：-200px;
}

グラフィック：

 

 方法2：カルテットは0で、マージン：オート

■は{
幅：400ピクセル。
高さ：300ピクセル;
ボーダー：2ピクセル黒一色。
位置：絶対;
左：0;
トップ：0;
下：0;
右：0;
マージン：自動;
}

グラフィック：

要素サイズが固定されていない3つの三つの方法

 

.box2 {
position: absolute;
left: 50%;
top: 50%;
/* 设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)*/
transform: translate(-50%, -50%);
}

 

4.方法四：使用伪元素 利用inline-block与vertical-align配合伪元素达到垂直居中

/* 背景左右居中 */
.dialog_container {
text-align: center;
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.35);
}
/* 伪元素上下居中 */
.dialog_container:after {
display: inline-block;
width: 0;
height: 100%;
content: "";
vertical-align: middle;
}

/* 真正居中的元素 */
.dialog_box {
display: inline-block;
vertical-align: middle;
text-align: left;
border: 1px solid black;
}

补充：将元素水平居中比较简单

1.块级元素居中 margin 和width配合

 

 2.内联元素居中 给其父级元素加text-align:center