水平垂直居中的布局（定宽高和不定宽高）

一、定宽高

1、绝对定位和负margin值：

  <section class="absolute">
        <div></div>
   </section>
   <style>
    section{
            display:block;     
    }
    section.absolute {
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            position: relative;
        }
        
        .absolute div {
            position: absolute;
            width: 50px;
            height: 50px;
            left: 50%;
            top: 50%;
            margin: -25px 0 0 -25px;
            background-color: yellow;
        }
   </style>

2、绝对定位加 transform:

<section class="absoluteTransform">
        <div></div>
</section>
<style>
     section{
            display:block;
     }
     section.absoluteTransform {
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            position: relative;
      }
        
      .absoluteTransform div {
            position: absolute;
            width: 50px;
            height: 50px;
            left: 50%;
            top: 50%;
            background-color: yellow;
            -webkit-transform: translate(-50%, -50%);
       }
</style>

3、绝对定位 + left/right/bottom/top + margin:

<section class="absoluteM">
        <div></div>
</section>
<style>
        section{
            display: block;
       }
         section.absoluteM {
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            position: relative;
        }
        
        .absoluteM div {
            width: 50px;
            height: 50px;
            background-color: yellow;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }          
</style>    

4、flex 布局：

    <section class="flex">
        <div></div>
    </section>
    <style>
        section{
           display: block;
        }
        section.flex {
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .flex div {
            width: 50px;
            height: 50px;
            background: yellow;
        }
    </style>

5、grid布局：

    <section class="grid">
        <div></div>
    </section>
    <style>
        section{
           display: block;
        }
         section.grid {
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            display: grid;
        }
        
        .grid div {
            width: 50px;
            height: 50px;
            background-color: yellow;
            margin: auto;
        }
    </style>

6、table 布局：

    <section class="table">
        <div></div>
    </section>
    <style>
        section{
           display: block;
        }
        section.table {
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        
        .table div {
            width: 50px;
            height: 50px;
            background-color: yellow;
            display: inline-block;
        }
    </style>

二、不定宽高

1、绝对定位加 transform:

<div class="box">
      <div class="children-box">111111</div>
 </div>

<style>
 .box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: relative;
}
.children-box {
   position: absolute;
   background: yellow;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}       
</style>

2、table布局：

<div class="box">
     <div class="children-box">111111</div>
</div>

<style>
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.children-box {
   background: yellow;
   display: inline-block;
}
</style>

3、flex 布局：

<div class="box">
    <div class="children-box">11111111</div>
</div>

<style>
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
}
.children-box {
    background: yellow;
}
</style>

4、flex 变异布局：

<div class="box">
      <div class="children-box">11111111</div>
</div>

<style>
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: flex;
}
.children-box {
    background: yellow;
    margin: auto;
}
</style>

5、grid + flex 布局：

<div class="box">
       <div class="children-box">11111111</div>
</div>

<style>
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: grid;
}
.children-box {
    background: yellow;
    align-self: center;
    justify-self: center;
}
</style>

6、grid + margin 布局：

<div class="box">
       <div class="children-box">11111111</div>
</div>

<style>
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: grid;
}
.children-box {
    background: yellow;
    margin: auto;
}
</style>

 

原文链接:https://www.cnblogs.com/tg666/p/12295566.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有