每天弄懂一个CSS知识点（各类居中）

元素定宽高

下面列举一下在居中元素定宽高的情况下我们要怎么做

计算法

absolute + margin

/* 节点情况
<body>
    <div class="father">
    <div class='child'></div>
    </div>
</body>

   <style>
        .father{
            position: relative;
            border: 10px solid red;
            width: 300px;
            height: 300 px;
        }
        .child{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 100px;
            margin-left: -50px;
            margin-top: -50px;
            background-color: aqua; 
        }
    </style>

注意点

使用absolute偏移后，还要根据自身的大小做相对应的修正
使用absoulte 父节点不能是static定位

2.absolute + calc

  <style>
        .father{
            position: relative;
            border: 10px solid red;
            width: 300px;
            height: 300px;
        }
        .child{
            position: absolute;
            top: calc(50% - 50px);
            left:  calc(50%  - 50px);
            width: 100px;
            height: 100px;
            background-color: aqua; 
        }
    </style>

原理和第一种是差不多的。

margin auto

absolute + margin: auto

   <style>
        .father{
            position: relative;
            border: 10px solid red;
            width: 300px;
            height: 300px;
        }
        .child{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 100px;
            height: 100px;
            background-color: aqua; 
        }
    </style>

设置top:0，left:0，right:0，bottom:0本质目的，是让子盒子四边与父容器间距为0，而子盒子没有明确宽高，自然被拉伸到完全填满父容器了。

三种方法的结果如下

每天弄懂一个CSS知识点（各类居中）

居中元素不定宽高

先给出节点信息

<body>
    <div class="father">
    <div class='child'>hello css</div>
    </div>
</body>

absoulte + transform

   <style>
        .father{
            position: relative;
            border: 10px solid red;
            width: 300px;
            height: 300px;
        }
        .child{
            position:absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: aqua; 
        }
    </style>

translate 可以设置百分比这是基于自身的宽和高算出来的

设置成行内元素

 <style>
        .father{
            /* position: relative; */
            border: 10px solid red;
            line-height: 300px;
            width: 300px;
            text-align: center;
        }
        .child{
           font-size: 20px;
           display: inline-block;
           vertical-align: middle;
           line-height: initial;
        }
    </style>

通过text-align 实现水平居中
通过vertical 实现垂直居中

使用css-table

  <style>
        .father{
            display: table-cell;
            border: 10px solid red;
            height: 300px;
            width: 300px;
            vertical-align: middle;
            text-align: center;
        }
        .child{
           font-size: 16px;
           display: inline-block;
        }
    </style>

或者

    <style>
        .father{
            display: table;
            border: 10px solid red;
            height: 300px;
            width: 300px;
            text-align: center;
        }
        .child{
            line-height: 1;
            display: table-cell;  
            vertical-align: middle;
        }
    </style>

display: table-cell 相当于是td标签

总体效果如下

每天弄懂一个CSS知识点（各类居中）

flex布局

很简单flex布局在当今非常常用，建议认真巩固一下这里推荐一下阮一峰老师的博客

Flex 布局教程：语法篇

    <style>
        .father{
            display: flex;
            border: 10px solid red;
            height: 300px;
            width: 300px;
            justify-content: center;
            align-items: center
            
        }
    </style>

gird布局

这种布局比较奇妙大家可以了解学习一下，但是兼容性不太好

CSS Grid 网格布局教程

 <style>
        .father{
            display: grid;
            border: 10px solid red;
            height: 300px;
            width: 300px;
            
            
        }
        .child{
            justify-self: center;
            align-self: center
        }
    </style>

总结一下

子元素宽高确定的情况下有兼容性要求的可以采用absolute + margin的方法
兼容性要求，不定宽高用table布局
一般推荐使用flex布局

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。