CSS使容器相对父元素垂直水平居中定位(父容器及子元素大小不确定)
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS使容器相对父元素垂直水平居中定位(父容器及子元素大小不确定)相关的知识，希望对你有一定的参考价值。
参考技术A 用TOP：50%，再MARGIN-TOP:负元素本身高度的一半就是中间位置了，，追问具体的代码应该怎么写？本人是菜鸟
追答先说一下你所说的大小不固定，
这就是一个错误，不管你有没有设置，它都是会从再上一级继承下来，
如果说，你所有都不设置高，宽，连BODY都把默认值去掉，，那你这CSS就已经是个错误。
BODY，理论默认是100% 100% 而有些浏览器会默认为：100% 0
比如说，你所说的是：
<div><div>子元素</div><div>然后这两个都没有设置高度，容器元素也是没有设置，再上一级也没有设置，那就不存在什么居中了，因为它们的高度宽度都是一样的。
所以换个思路吧，或者把你为什么想这样想的思路说出来，或者可以给你看看转成别的实现办法。
参考技术B <style type="text/css">.box
display:table-cell;
width:600px;
height:600px;
background:black;
vertical-align:middle;
text-align:center;
.child
display:inline-block;
width:100px;
height:100px;
background:white;
</style>
<body>
<div class="box">
<div class="child">
</div>
</div>
</body>
大小都是可以改动的追问
你写的代码是尺寸大小已知，但我要的是位置，我只需要.child 里面的那段代码
追答尺寸大小都是可以随机改动的呢。其他的都不用改。这不就是未知尺寸居中么。其实这种居中方法的主要在box的table-cell和两个文本居中。主要是有帮助到你。解决了问题。多谢你的推荐。
本回答被提问者和网友采纳html标签的垂直居中方法总结
以前总是被垂直居中的方法所困扰，今天来总结一下垂直居中的方法，增强记忆
div等块级元素居中
第一种方法，利用绝对定位居中（相对于父容器），就是要居中的元素相对父容器做一个绝对定位，要求块级元素的高度和宽度确定（水平居中则要求宽度确定），然后设置上下左右数值都为零，再设置外边距为自动就可以了，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>垂直居中测试</title> <style> * { padding: 0; margin: 0; } body { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } #myBox { width: 500px; border: 1px solid black; background: #eee; color: #333; text-align: center; } div { height: 500px; left: 0; right: 0; top: 0; bottom: 0; position: absolute; margin: auto; } </style> </head> <body> <div id="myBox"> 我是测试 </div> </body> </html>
实现的效果如下：
如果是只要求垂直居中，则div的宽度可以不确定，外边距的值设置成margin：auto 0；去掉div的right和left其他值不变，代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>垂直居中测试</title> <style> * { padding: 0; margin: 0; } body { position: absolute; top: 0; bottom: 0; margin: 0 auto; } #myBox { width: 500px; border: 1px solid black; background: #eee; color: #333; text-align: center; } div { height: 500px; left: 0; right: 0; top: 0; bottom: 0; position: absolute; margin: auto; } </style> </head> <body> <div id="myBox"> 我是测试 </div> </body> </html>
效果如下：
在高度确定的情况下，还可以利用css3的flex属性处置居中。就是在需要居中的元素的父容器里面设置：display：flex;align-items: center;就可以了，如果还想水平居中加上justify-content：center;代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>垂直居中测试</title> <style> * { padding: 0; margin: 0; } body { display: flex; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; border: 1px solid red; text-align: center; align-items: center; justify-content: center; } #myBox { width: 500px; border: 1px solid black; background: #eee; color: #333; } div { height: 500px; } </style> </head> <body> <div id="myBox"> 我是测试 </div> </body> </html>
效果如下：
这个方法是css3的新属性，如果要兼容不支持该属性的浏览器不要使用。
如果想做的div是个弹窗之类的东西，宽度高度都不确定，还要垂直水平居中，这个更简单，目前只发现一种办法，父容器设置display: flex;要居中的元素设置margin： auto；就行了，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>垂直居中测试</title> <style> * { padding: 0; margin: 0; } body { display: flex; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; border: 1px solid red; } #myBox { display: inline-block; border: 1px solid black; background: #eee; color: #333; margin: auto; } </style> </head> <body> <div id="myBox"> <p>我是测试</p> <p>我是测试</p> <p>我是测试</p> <p>我是测试</p> </div> </body> </html>
效果如下：
这个方法也是仅适用支持css3的浏览器。
以上是关于CSS使容器相对父元素垂直水平居中定位(父容器及子元素大小不确定)的主要内容，如果未能解决你的问题，请参考以下文章