html要素の中心
2363 ワード
一、不定幅高要素が中央になる
HTML:
this is content
CSS:
.father {
display: table;
}
.son {
display: table-cell;
vertical-align: middle;
text-align: center;
}
HTML:
is this OK?
CSS:
.father {
position: relative;
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
HTML:
this is a box fixed in center of screen
The second line
CSS:
.father{
display: flex;
align-items: center;
justify-content: center;
}
HTML:
this is a box fixed in center of screen
The second line
CSS:
.father {
text-align: center;
background-color: red;
}
.father:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.son {
display: inline-block;
}
:beforeの次の行から始まるので、beforeの100%の高さの下で突き出されることになる.father.しかし、文字を置くと.sonの中で、また譲ります.sonはinline-blockで、使えます.sonと:beforeは同じベースラインにあり、全体を譲る.sonは垂直中心の状態にある.HTML:
this is a box fixed in center of screen
CSS:
.inner {
position:fixed;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
}
二、固定幅の高い要素が中央にある
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 800px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 300px;
height: 350px;