垂直水平居中

源代码:

<div class="out">
    <div class="in">Content here</div>
</div>
 .out{
     width: 300px;
     height: 400px;
     margin: 20px auto 0;
    background:red;
 }
 .in{
     width: 100px;
     height: 100px;
     background: blue;
     line-height: 100px;
 }

运行图:

1.使用表格法:

运行图: 

.out{
     display: table;
     text-align: center;
 }
 .in{
   display: table-cell;
   vertical-align: middle;
 }

缺点:子元素的会撑满父元素。

2.绝对定位计算:对子元素使用绝对定位,并分别移动上左50%,再分别margin-top:-50%height px,margin-left:-50%width px;

运行图:

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

缺点:需要对子元素的宽高固定,并且绝对定位容易影响布局。

 3.  利用绝对定位和translate。

同上,先左上各自移动50%,再使用transform: translate(-50%, -50%);translate是基于自身元素的宽高为基准进行移动的。

运行图同上。

.in{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
 }

缺点:需要绝对定位。

4. 基于Flex.

运行图同上。

.out{
   display: flex;
 }
 .in{
    margin: auto; 
 }

优点:代码简单。

缺点:兼容性差。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券