CSS实现div的嵌套居中显示的多种方式

1.通过flex方式实现：将父盒子的position属性设置为relative，并且display设置为flex，最后设置水平居中和垂直居中。这样设置后，子盒子不需要设置什么，就会实现居中。哪个盒子需要居中，就将父盒子设置这四个属性即可。这样有利于嵌套使用，这也是我实现居中最常用的方式。

例子：

文件center.html的代码如下

<!DOCTYPE html>
<html lang="en">
<head><link rel="stylesheet" href="center1.css">
</head>
<body><div class="outer"><div class="inner"></div></div>
</body>
</html>

文件center1.css的内容如下

* {margin: 0;padding: 0;
}
body {position: relative;display: flex;justify-content: center;align-items: center;height: 100vh;
}
body .outer {position: relative;display: flex;justify-content: center;align-items: center;width: 400px;height: 400px;background-color: red;
}
body .outer .inner {position: absolute;width: 200px;height: 200px;background-color: green;
}

补充：我写样式时，喜欢写less文件的方式，所以，这里补充一下less文件。（利用VsCode会自动将less转换为css）。以下是center1.less的代码。

* {margin: 0;padding: 0;
}body {position: relative;display: flex;// 水平居中justify-content: center;//垂直居中align-items: center;// width: 100%;height: 100vh;.outer {position: relative;display: flex;justify-content: center;align-items: center;width: 400px;height: 400px;background-color: red;.inner {position: absolute;width: 200px;height: 200px;background-color: green;}}
}

结果：为了保证功能相同，所有实现方式的结果都是下面这样，后面就不写结果了。

注意：

1.position、display、justify-content和align-items四个属性缺一不可，且值不能改变。

2.需要设置父盒子和子盒子的宽度和高度，不然居中就失去了意义。从body的样式开始写，是为了体现在整个屏幕最中心的功能，body样式的宽度可以不设置（默认是100%），但是高度需要设置为100vh。

2.通过原生方式：手动调节两个盒子之间的距离，实现居中，较为灵活。这种方式对父盒子设置不多，所有的关键设置都在子盒子里面，与上面的方式恰好相反。

例子：

文件center.html的代码如下

<!DOCTYPE html>
<html lang="en">
<head><link rel="stylesheet" href="center2.css">
</head>
<body><div class="outer"><div class="inner"></div></div>
</body>
</html>

文件center2.css代码如下

* {margin: 0;padding: 0;
}
body {height: 100vh;
}
body .outer {position: absolute;top: 50%;left: 50%;width: 400px;height: 400px;background-color: red;transform: translate(-50%, -50%);
}
body .outer .inner {position: relative;top: 50%;left: 50%;width: 200px;height: 200px;background-color: green;transform: translate(-50%, -50%);
}

补充：文件center2.less的代码如下

* {margin: 0;padding: 0;
}body {// width: 100%;height: 100vh;.outer {position: absolute;// 对body这个盒子来说的比例top: 50%;left: 50%;width: 400px;height: 400px;background-color: red;// 对当前盒子来说的比例transform: translate(-50%, -50%);.inner {position: relative;// 对.outer这个盒子来说的比例，top和left属性只有在position属性值为absolute或relative时才能使用top: 50%;left: 50%;// 上面的比例等价于以下数值// top: 200px;// left: 200px;// 当然将top和left两个属性替换为margin-top或margin-left也可以，这样又会产生两种方式。// margin-top和margin-left属性对position属性没什么要求// margin-top: 50%;// margin-left: 50%;// margin-top: 200px;// margin-left: 200px;width: 200px;height: 200px;background-color: green;// 对当前盒子来说的比例transform: translate(-50%, -50%);// 上面的数值等价于以下数值// transform: translate(-100px, -100px);}}
}

注意：

1.可以看到center2.less实现方式较多，都可以实现相同功能，对于新手，先熟悉一种就好，不然容易混了。一般使用目前center2.css当前表示方式即可，也就是center2.less没有注释掉的方式。（如果熟悉了一种方式，也可以测试一下其他方式）

2.两个盒子外边距实现方式的注意点

方式1：使用left和top方式时，position属性的值必须为absolute或者relative。

方式2：这种方式纯属为了表明方式1的意义才写的，一般不使用。left和top属性的百分比是对于父盒子而言。

方式3：margin-top和margin-left属性对于所有的position的值都可以使用。（不写position属性，使用默认值static也可以）

方式4：这种方式纯属为了表明方式3的意义，一般不使用。

常用的方式是方式1和方式3，使用方式1需要将position属性设置为absolute或relative。

3.如果只设置上和左的外边距，会发现盒子并非在中央。上和左分别偏移了宽度和长度的一半，所以需要向上移动宽度的一半，向左移动长度的一半。移动的百分比是对于当前盒子而言，正好符合我们的需求。我们一般使用百分比方式移动即可，数值移动是为了区分上面百分比才写的。

3.混合使用方式：就是将上面两种方式混合使用，随自己的心意进行写，一般不会这样使用。写这种方式，真正理解了上面的实现方式，实现居中div真的非常容易。

例子：

文件center.html的代码如下

<!DOCTYPE html>
<html lang="en"><head><link rel="stylesheet" href="center3.css"></head><body><div class="outer"><div class="inner"></div></div></body>
</html>

文件center3.css的代码如下

* {margin: 0;padding: 0;
}
body {position: relative;height: 100vh;display: flex;justify-items: center;align-items: center;
}
body .outer {position: relative;width: 400px;height: 400px;background-color: red;position: absolute;left: 50%;transform: translate(-50%);
}
body .outer .inner {position: absolute;width: 200px;height: 200px;background-color: green;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

文件center3.less的代码如下

* {margin: 0;padding: 0;
}body {position: relative;// width: 100%;height: 100vh;display: flex;justify-items: center;align-items: center;.outer {position: relative;width: 400px;height: 400px;background-color: red;// 手写position: absolute;// 相对于body盒子的比例left: 50%;// 向左移动当前盒子的一半距离transform: translate(-50%);.inner {position: absolute;width: 200px;height: 200px;background-color: green;top: 50%;left: 50%;transform: translate(-50%, -50%);}}
}

上面内容也是自己学习过程中的笔记，可能有些不准确甚至是错误的，请多包涵！！！

CSS实现div的嵌套居中显示的多种方式相关推荐

html div背景自动居中显示,网站背景图居中自适应以及拉伸填充CSS代码解决方法...
写这篇水文呢,也是最近在自己在魔改一个主题用作新做的班级网站. 发现模版的背景图片以及其他地方的图片显示只能在电脑端看到,而在移动端不能够自适应.顺便也整理出来. 首先是图片的居中自适应: 需要先给C ...
网页html 图片横向摆放,css实现多张图片横向居中显示的方法
先讲一下实现的步骤: 最终效果 2. 代码实现 HTML部分分类小贴士 CSS部分 .main{ width:100%; margin-top:40px; } .main .tag{ margin: ...
css设置div上下左右均居中、底部居中
css设置div或盒子居中 #垂直居中 #左右居中 #底部居中类型一:固定宽度高度 html代码 <div class="login_container"><d ...
包含多个table的html整体居中,css实现div或table居中，文字不居中【Chrome/Firefox/IE测试通过】...
之前设计网页,如果希望div或table居中,总是用把它包起来,但是这样的结果,div或table虽然居中了,但div或table里面的文字也居中了,这是不符合设计者意愿的.那么,我们能否用css实 ...
CSS 如何让li横向居中显示
先给一个简单的示例HTML代码 [html] view plaincopy <body> <form id="form1" runat="server& ...
怎么让html滚动字幕居中,CSS设置DIV窗口上下居中无滚动条
前端开发中,免不了居中的需求.对于居中有很多方法,本次介绍一个不用js获取窗口,纯css给div"肉眼上的"上下左右居中,并且没有滚动条的实例.为什么说是"肉眼上的&qu ...
css中表居中,CSS DIV中表格居中显示
使用css3的动画模拟太阳系行星公转本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最 ...
css如何让背景上下居中显示,CSS有哪些方式可以实现垂直居中？
大家好,我是IT修真院郑州分院第四期的学员汪开放,一枚正直纯洁善良的web程序员今天给大家分享一下,CSS有哪些方式可以实现垂直居中? 1.背景介绍 44年前我们把人送上月球,但在CSS中我们仍然不 ...
html中div设置图片居中显示,图片在DIV中居中显示的方法
问:如何让图片在DIV中水平和垂直两个方向都居中?(注意这里的图片非用作背景) 关于该问题的解决方法如下: 方法一: 思路:利用text-align属性将图片水平居中,然后设置padding-top的 ...

CSS实现div的嵌套居中显示的多种方式

上面内容也是自己学习过程中的笔记，可能有些不准确甚至是错误的，请多包涵！！！

CSS实现div的嵌套居中显示的多种方式相关推荐

最新文章

热门文章