首页 > 代码库 > div水平居中和垂直居中

div水平居中和垂直居中

2024-08-21 18:57:29   225人阅读

1：使用table和table-cell布局

    <div style="width: 100%;height: 100%;display: table;text-align: center">        <div style="width: 100%;height: 100%;display: table-cell;vertical-align: middle;">            <div style="display: inline-block;width: 100px;height: 100px;background: green;">            </div>        </div>    </div>

2：使用flex布局

<style>    .verticalTop{        display: flex;        align-items:flex-start;        height: 100%;    }    .verticalBottom{        display: flex;        align-items:flex-end;        height: 100%;    }    .verticalCenter{        display: flex;        align-items:center;        height: 100%;    }    .horizaLeft{        display: flex;        justify-content:flex-start;        text-align: left;        width: 100%;    }    .horizaRight{        display: flex;        justify-content:flex-end;        text-align: right;        width: 100%;    }    .horizaCenter{        display: flex;        justify-content:center;        text-align: center;        width: 100%;    }</style>
  <div class="verticalCenter horizaCenter">        <div style="width: 100px;height: 100px;background: yellow;">        </div>    </div>

 

居中效果：

技术分享

div水平居中和垂直居中


联系
我们