欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS-几种元素居中方式

程序员文章站 2022-04-24 20:56:58
...

margin
table居中
利用伸缩盒居中


margin居中
CSS-几种元素居中方式

<div style="width: 100px;
            height: 100px;
            margin: 0 auto;
            background-color: greenyellow;">
            居中
</div>

table居中
适用于文字居中,还有line-height ;
CSS-几种元素居中方式

<!--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-几种元素居中方式

<!--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>
相关标签: css