CSS-几种元素居中方式
程序员文章站
2022-04-24 20:56:58
...
margin
table居中
利用伸缩盒居中
margin居中
<div style="width: 100px;
height: 100px;
margin: 0 auto;
background-color: greenyellow;">
居中
</div>
table居中
适用于文字居中,还有line-height ;
<!--css-->
.box1{
width: 100px;
height: 100px;
background-color: aquamarine;
display: table;
}
.box2{
display: table-cell;
vertical-align: middle;
text-align: center;
}
<!--html-->
<div class="box1">
<p class="box2">居中</p>
</div>
利用伸缩盒居中
flex-box,以Chrome为例,设置Chrome内核的弹性盒子
<!--css-->
.outter{
width: 200px;
height: 200px;
background-color: gold;
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
}
.inner{
width: 100px;
height: 100px;
background-color: aqua;
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
}
<!--html-->
<div class="outter">
<div class="inner">
居中
</div>
</div>
上一篇: PHP apach 配置局域网访问问题
下一篇: phpcms微信插件自动回复的优化方法