其他分享
首页 > 其他分享> > 【html+css】总结七种垂直水平居中的办法

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

作者:互联网

第一种:定位+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;
      }

运行截图如下:

 

 

标签:七种,50%,100px,height,width,html,css,200px
来源: https://www.cnblogs.com/Ynline/p/16492455.html