css实现元素居中的6种方法
发布时间：2023-09-07 11:34:01 作者：富朝阳 
我要评论
我要评论相信大家在面试的时候也会经常碰到css实现元素居中的方法，下面我介绍6种方法给大家，欢迎大家评论区交流
前言
相信大家在面试的时候也会经常碰到css实现元素居中的方法，下面我介绍6种方法给大家，欢迎大家评论区交流。
需求：
给定两个元素，这两个元素是父子级关系
并且两个元素的大小都是不确定的，那么这时候如何让子级在父级中上下左右都居中？（暂且设定父级比子级要大一些）。
实现方案：
1.最简单的方法
父元素设置display:flex,子元素 margin: auto，代码如下：
<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它就可以上下左右都居中了
<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%就可以让子级在父级中上下左右都居中了
<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的功劳，没啥技巧，掌握了弹性盒模型就能掌握这个方法，简单粗暴。
<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
这个方法和弹性盒模型一样，简单粗暴，没啥可说的。
<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标签一样。再只要添加一个水平居中属性就好了。
<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> 
以上就是一些我们常用的垂直居中的方案。欢迎在评论区交流。
相关文章
这篇文章主要介绍了css实现元素居中的N种方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要介绍了css实现元素垂直居中显示的7种方式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学2020-09-04- 这篇文章主要介绍了CSS实现子元素div水平垂直居中的示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2020-09-03
这篇文章主要介绍了css 不定宽高的元素居中布局解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2019-09-18
这篇文章主要介绍了CSS自适应布局实现子元素项目整体居中，内部项目左对齐，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们2019-09-03- 这篇文章主要介绍了css常用元素水平垂直居中方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习2019-08-09
- 本文给大家分享几种方法介绍css实现元素垂直居中的常用方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-01
- 在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了。这篇文章主要介绍了CSS实现元素居中原理解析，本文分别从行内元素和块级元素进行说明，具有一定的参考价值，感兴2018-10-18
- 作为前端攻城师，在制作Web页面时都有碰到CSS制作水平垂直居中，我想大家都有研究过或者写过，特别的其中的垂直居中，更是让人烦恼，下面这篇文章主要给大家汇总介绍了关于2017-09-12
- 这篇文章主要给大家介绍了css实现元素水平垂直居中的两种方式，文中给出了完整的示例代码供大家参考学习，对大家的学习或者工作具有一定的参考价值，有需要的朋友们下面来2017-04-23
最新评论