<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.parents {
width: 300px;
height: 300px;
border: 1px solid red;
margin: 0 0 50px 0;
}
.son{
width: 100px;
height: 100px;
background: red;
}
.onePar{
position: relative;
}
.oneSon{
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
.twoPar{
position: relative;
}
.twoSon{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.threePar {
position: relative;
}
.threeSon{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.fourPar{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.fourSon{
display: inline-block;
}
.fivePar{
text-align: center;
}
.fivePar:before{
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
background: yellow;
}
.fiveSon{
display: inline-block;
vertical-align: middle;
}
.sixPar{
display: flex;
align-items: center;
justify-content: center;
}
.sixSon{
}
</style>
</head>
<body>
<h1>1</h1>
<div class="parents onePar">
<div class="son oneSon">111</div>
</div>
<h1>2</h1>
<div class="parents twoPar">
<div class="son twoSon">111</div>
</div>
<h1>3</h1>
<div class="parents threePar">
<div class="son threeSon">111</div>
</div>
<h1>4</h1>
<div class="parents fourPar">
<div class="son fourSon">111</div>
</div>
<h1>5</h1>
<div class="parents fivePar">
<div class="son fiveSon">111</div>
</div>
<h1>6</h1>
<div class="parents sixPar">
<div class="son sixSon">111</div>
</div>
</body>
</html>
ソースコードをエディタにコピーするだけで表示できます。
