如何让一个不知宽高的盒子上下左右居中(纯css)

原创 motu_1991 随笔 面试相关 898阅读 2017-05-12 14:00:31 举报

找到两种方法:

1:<div style="width:400px;height:200px;background:#000;color:#f00;display:table">
<div style="display:table-cell;overflow:hidden;vertical-align:middle;text-align:center">
iframe自适应iframe自适应ifram
</div>
</div>

2:<div style="width:400px;height:200px;background:#000;color:#f00;position:relative">
<div style="position: absolute;;left:50%;top:50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);">
iframe自适应iframe自适应ifram
</div>
</div>
3.<div style="width:400;height:300px;display:flex;background:#000;color:#f00">
<div style="margin:auto auto">
iframe自适应iframe自适应ifram
iframe自适应iframe自适应ifram
iframe自适应iframe自适应ifram
iframe自适应iframe自适应ifram
</div>
</div>

效果图:

如何让一个不知宽高的盒子上下左右居中(纯css)

评论 ( 4 )
最新评论
motu_1991 3F 2017-05-12 17:36:41 4F

好 我看看

mengchen129 2F 2017-05-12 16:57:07 3F

@amandakelake 说的没错,用 flex 布局比你的这两种方式更简单。给父元素加上 display: flex; justify-content: center; align-items: center 就行了。

motu_1991 1F 2017-05-12 16:22:16 2F

谢谢 我去看看 我觉得这两种好写一点

amandakelake 2017-05-12 15:36:02 1F

还有一种,flex布局 你可以百度一下