CSS中央総括

目次

水平中央

CSS3 absolute+transform

flex

margin auto

float+relative

absolute

垂直中央

transform+absolute

flex

既知幅:absolute

絶対中央

水平方向中央

CSS3 absolute+transform

通用——広高未知~~

.parent { 
    position: relative;     
}
.child { 
    position: absolute; 
    left: 50%;
    transform: translateX(-50%); 
}

flex

通用——広高未知~~

.parent { 
    display: flex; 
    justify-content: center;    /*       ，        */
}

margin auto

幅のあるブロック要素

float+relative

.child { 
    width: 100px; 
    float: left; 
    position: relative; 
    left: 50%; 
    margin-left: -50px; 
}

absolute

.parent { 
    position: relative;
} 
.child { 
    position: absolute; 
    width: 100px; 
    left: 50%; 
    margin-left: -50px; 
}

.child { 
    position: absolute; 
    width: 100px; 
    left:0;
    top:0;
    margin:0 auto;
}

垂直方向中央揃え

transform+absolute

通用——広高未知~~

.parent { 
    position: relative;     
}
.child { 
    position: absolute; 
    top: 50%;
    transform: translateY(-50%); 
}

flex

通用——広高未知~~

.parent { 
    display: flex; 
    align-items: center;    /*         */
}

既知幅:absolute

.parent { 
    position: relative; 
}
.child{ 
    position: absolute; 
    top: 50%; 
    height: 100px; 
    margin-top: -50px; 
}

.parent { 
    position: relative;
} 
.child{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    height: 100px; 
    margin: auto 0; 
}

絶対中央

ポップアップウィンドウとしてカプセル化できます.

div { 
    width: 100px; 
    height: 100px; 
    margin: auto; 
    position: fixed; /* absolute    */
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
}