已知子元素宽高为100px
html代码1:
<div class="fu">
<div class="zi"></div>
</div>
css代码1:
.fu {
position: relative;
width: 600px;
height: 400px;
background: blue;
}
.zi {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
background: red;
}
效果1:
css代码2:
* {
box-sizing: border-box;
}
.fu {
width: 600px;
height: 400px;
background: blue;
padding: 50px 100px;
}
.zi {
height: 100%;
width: 100%;
background: red;
}
效果2:
html代码3:
// 这段代码不是真正的水平居中,div设置成inline-block会产生空隙,所以.zi靠左边一点
<div class="fu">
<div class="zi"></div>
// class为zi2的div是个内容为空的元素
<div class="zi2"></div>
</div>
css代码3:
.fu {
width: 600px;
height: 400px;
background: blue;
text-align: center;
}
.zi {
display: inline-block;
width: 100px;
height: 100px;
background: red;
vertical-align: middle;
}
.zi2 {
display: inline-block;
vertical-align: middle;
height: 100%;
width: 0;
}
效果3:
html代码4:
<div class="fu">
<div class="zi">
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
<li>006</li>
<li>007</li>
<li>008</li>
<li>009</li>
</ul>
</div>
</div>
css代码4:
.fu {
width: 600px;
height: 400px;
background: blue;
text-align: center;
}
.fu::after {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.zi {
background: red;
display: inline-block;
vertical-align: middle;
width: 100px;
}
ul {
list-style: none;
}
效果4:
未知宽高
html代码1:
<div class="fu">
<div class="zi">
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
<li>6666</li>
<li>7777</li>
<li>8888</li>
<li>9999</li>
</ul>
</div>
</div>
css代码1:
.fu {
position: relative;
width: 600px;
height: 400px;
background: blue;
}
.zi {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: red;
}
ul {
list-style: none;
}
效果1:
css代码2:
.fu {
width: 600px;
height: 400px;
background: blue;
display: flex;
justify-content: center;
align-items: center;
}
.zi {
background: red;
}
ul {
list-style: none;
}
效果2: