【html+css】总结七种垂直水平居中的办法

web 文章 2022-07-20 10:02 0 全屏看文

第一种:定位+cala(固定宽高)

html部分:
<div class="box1">      <div class="inner"></div></div>

css部分:

.box1{  width: 200px;  height: 200px;  border: 1px solid black;  position: relative;}
.box1 .inner { width: 100px; height: 100px; background-color: red; position: absolute; /* 下面这个减号两边要隔开一个空格 */ top: calc(50% - 50px); left: calc(50% - 50px); }

运行截图如下:

 第二种:.定位+margin(固定宽高)

html部分:

<div class="box2">      <div class="inner"></div>    </div>

css部分:

.box2{        width: 200px;        height: 200px;        border: 1px solid black;        position: relative;}  .box2 .inner {        width: 100px;        height: 100px;        background-color: red;        position: absolute;        left: 50%;        top: 50%;        margin-top: -50px;        margin-left: -50px;      }

运行截图如下:

第三种:定位+margin:auto(不定宽高)

html部分:

 <div class="box3">      <div class="inner"></div>    </div>

css部分:

 .box3 {        width: 200px;        height: 200px;        border: 1px solid black;        position: relative;      }.box3 .inner {        width: 100px;        height: 100px;        background-color: red;        position: absolute;        margin: auto;        left: 0;        right: 0;        top: 0;        bottom: 0;      }

运行截图如下:

第四种:transfrom(不定宽高)

html部分:

<div class="box4">      <div class="inner"></div>    </div>

css部分:

.box4 {        width: 200px;        height: 200px;        border: 1px solid black;        position: relative;      } .box4 .inner {        width: 100px;        height: 100px;        background-color: red;        position: absolute;        left: 50%;        top: 50%;        transform: translate(-50%, -50%);      }

运行截图如下:

 第五种:flex布局(不定宽高)

html部分:

<div class="box5">      <div class="inner"></div>    </div>

css部分:

 .box5 {        display: flex;        width: 200px;        height: 200px;        border: 1px solid black;        justify-content: center;        align-items: center;      } .box5 .inner {        width: 100px;        height: 100px;        background-color: red;      }

运行截图如下:

第六种:grid布局(不定宽高)

html部分:

  <div class="box6">      <div class="inner"></div>    </div>

css部分:

.box6 {        display: grid;        justify-content: center;        align-items: center;        width: 200px;        height: 200px;        border: 1px solid black;      }.box6 .inner {        width: 100px;        height: 100px;        background-color: red;      }

运行截图如下:

 第七种:table-cell布局(不定宽高)

html部分:
 <div class="box7">      <div class="inner"></div>    </div>

css部分:

 .box7 {        width: 200px;        height: 200px;        border: 1px solid black;        display: table-cell;        /* 使用这个布局里面的元素必须是inline-block元素 */        text-align: center;        vertical-align: middle;      }      .box7 .inner {        display: inline-block;        width: 100px;        height: 100px;        background-color: red;      }

运行截图如下:

-EOF-