让DIV居中的四种打开方式
我们都经历过，在开发的过程中，人们被要求将某个div 居中的那个可怕时刻......你会怎么做？用TABLE做行不行？哎，CSS 咋这么难！
遇到事情不要慌，我们要梳理梳理。我在这里为各位提供 4 种使 div 居中的简单方法！用哪个都能使我们的子元素居中。
以下是的 事先安排好的 HTML 页面：
以下是 CSS：
{width: 300px;height: 300px;: rgb(128, 128, 128);}{width: 100px;height: 100px;: rgb(52, 54, 97);;}
页面效果将这样显示：
下面我们就开始用四种茴香豆来实现DIV居中的效果～
第一种方法：使用CSS 网格（Grid）
我知道，使用 CSS Grid 确实不是一件易事！这里我们须向父元素添加网格，并为其添加水平对齐和垂直对齐于内容的方法：
.parentElement {display: grid;justify-content: center;align-content: center;
显示后是这样的：
可以看到已经成功地将我们的子元素居中了！！接着来看使 .div 居中的第二种方法。
第二种方法：使用Flexbox
现在，我们需要添加与gird所做的相同属性，但要把display设置为flexbox。
.parentElement {display: flex;justify-content: center;align-content: center;}
请看这里：
当当当当，又是一个可爱的居中画面！现在我们有 2 个让DIV居中的方法！下面继续。
第三种方法：使用Margin
我们可以在一个DIV中使用margin:auto的方法，让某一元素垂直和水平居中。如下代码：
.parentElement {display: flex;}.childElement {margin: auto;}
显示效果如下：
嗯，这也是一种居中方式。
第四种：使用位置属性居中
这个需要多写几行代码，但你也别担心！这仍然是一个简单的方法。
我们首先需要将父元素的位置设置为relative，然后将子元素的位置设置为absolute，同时还要设置transform、top、left 和right 属性。
代码是这样式儿的：
.parentElement {position: relative;}.childElement {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
显示效果如下：
非常感谢您的阅读！！:) 各位可将本文保留收藏，留做面试或不时之用～
本文为 @ 场长 创作并授权 21CTO 发布，未经许可，请勿转载。
内容授权事宜请您联系 webmaster@21cto.com或关注 21CTO 公众号。
该文观点仅代表作者本人，21CTO 平台仅提供信息存储空间服务。
评论
场长
标准用户最新文章
微服务与单体架构：如何做出正确...
01月02日AI 将接管价值 12 万亿的美国服...
01月02日谷歌前 CEO 施密特：AI 将在今年...
01月03日Rust 将会爆发，SBOM 将会失效：...
01月02日Linux 的 9 个主要烦恼将成为过...
12月31日