简介

内容

为了方便我先把总体样式列出,如下:

 .box {
            height: 200px;
            width: 200px;
            position: relative;
        }

.content {
            height: 100px;
            width: 100px;
            
        }

• 方案一(margin:auto)
  我们常用margin:0 auto;来设置已知宽高的块级元素的水平居中.其实margin:auto也可以设置垂直居中,但是还要做一些别的相关设置,才能使得其有效.代码:
  -css

 .margin-auto {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

-html

 <div class="box">
            <div class="content margin-auto ">
            </div>
        </div>

-效果:

• 方案二 ( 使用transform垂直居中 )
  -css

.transform {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);
        }

-html

 <div class="box">
            <div class="content transform ">
            </div>
        </div>

-效果

• 方案三 (设置margin为负值)

-css

 .margin-negative {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }

-html

 <div class="box">
            <div class="content margin-negative ">
            </div>
        </div>

-效果

方案四 (使用display:table-cell)

-css

 .table-cell {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        
  .vertical-middle {
            display: inline-block;
        }

-html

 <div class="box table-cell  ">
        <div class="content vertical-middle">
        </div>
    </div>

-效果

• 方案五 (使用伪元素)

-css

 .line {
            text-align: center;
        }
        
.line::before {
            content: "";
            display: inline-block;
            width: 1px;
            height: 100%;
            background-color: white;
            vertical-align: middle;
        }
        
.line-after {
            vertical-align: middle;
            display:inline-block
        }

-html

<div class="box line">
            <div class="content  line-after ">
            </div>
 </div>

-效果

• 方案六 (使用flex,伸缩布局)

这里要说一下,这是我比较喜欢的方式.唯一的遗憾就是有兼容性问题.
-css

 .flex {
            display: flex;
            justify-content: center;
            align-items: center;
        }

-html

       <div class="box flex">
            <div class="content  ">
            </div>
        </div>

-效果

结束

好了,就介绍着几种方案,毕竟本人知识有限.最后来张全家福