分享css实现元素居中的6种方法

相信大家在面试的时候也会经常碰到css实现元素居中的方法，下面我介绍6种方法给大家，欢迎大家评论区交流。

需求：

给定两个元素，这两个元素是父子级关系

并且两个元素的大小都是不确定的，那么这时候如何让子级在父级中上下左右都居中？（暂且设定父级比子级要大一些）。

实现方案：

1.最简单的方法

父元素设置display:flex,子元素 margin: auto，代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<style>     .parent {       width: 300px;       height: 200px;       background: rebeccapurple;       display: flex;     }     .child {       width: 50px;       height: 50px;       background: red;       margin: auto;     }   </style>   <div class="parent">     <div class="child"></div>   </div>

2.利用定位

思路

父级相对定位，子级绝对定位 而四个定位属性的值都设置了0；那么这时候如果子级没有设置宽高，则会被拉开到和父级一样宽高。而现在设置了子级的宽高，所以宽高会按照我们的设置来显示；但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个margin：auto它就可以上下左右都居中了

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<style>     .parent {       width: 300px;       height: 200px;       background: pink;       position: relative;     }     .child {       width: 50px;       height: 50px;       background: gold;       position: absolute;       left: 0;       top: 0;       right: 0;       bottom: 0;       margin: auto;     }   </style>   <div class="parent">     <div class="child"></div>   </div>

3.定位配合css3位移

思路

父级相对定位，子级绝对定位，而top，left这两个属性的如果给百分比；那么这个百分比则是相对于父级的宽高来进行计算的；如果只给定这两个值，则子级的右上角会和父级的中心点对齐，得到下图：这时候则需要进一步操作：css3中的位移属性，则是根据自身来计算百分比的；所以只需要利用这个属性把自身再往左上角各移动50%就可以让子级在父级中上下左右都居中了

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<style>     .parent {       width: 300px;       height: 200px;       background: rgb(203, 192, 255);       position: relative;     }     .child {       width: 50px;       height: 50px;       background: rgb(221, 201, 73);       position: absolute;       left: 50%;       top: 50%;       transform: translate(-50%,-50%);     }   </style>   <div class="parent">     <div class="child"></div>   </div>

4.弹性盒模型

css3的功劳，没啥技巧，掌握了弹性盒模型就能掌握这个方法，简单粗暴。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<style>     .parent {       width: 300px;       height: 200px;       background: rgb(203, 192, 255);       display: flex;       justify-content: center;       align-items: center;     }     .child {       width: 50px;       height: 50px;       background: rgb(62, 57, 24);     }   </style>   <div class="parent">     <div class="child"></div>   </div>

5.网格布局Grid

这个方法和弹性盒模型一样，简单粗暴，没啥可说的。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<style>     .parent {       width: 300px;       height: 200px;       background:green;       display: grid;       justify-content: center;       align-items: center;     }     .child {       width: 50px;       height: 50px;       background: rebeccapurple;     }   </style>   <div class="parent">     <div class="child"></div>   </div>

6.tabel-cell实现垂直居中 

将父容器的display指定为table，这样浏览器便会把parent当作一个table对待，然后向table中添加元素，元素具有的效果就会和直接使用td标签一样。再只要添加一个水平居中属性就好了。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<style>     .parent {       width: 300px;       height: 200px;       background: rgb(120, 202, 13);       display: table-cell;       vertical-align: middle; // 垂直居中     }     .child {       width: 50px;       height: 50px;       background: rgb(110, 83, 231);       margin: auto; // 水平居中     } </style> <div class="parent">   <div class="child"></div> </div>

 

以上就是一些我们常用的垂直居中的方案。欢迎在底部留言交流。

来源：微点阅读   https://www.weidianyuedu.com