Css 如何将两个div水平和垂直居中放置在另一个div内？_Css_Html_Vertical Alignment_Alignment

Css 如何将两个div水平和垂直居中放置在另一个div内？

css html

Css 如何将两个div水平和垂直居中放置在另一个div内？,css,html,vertical-alignment,alignment,Css,Html,Vertical Alignment,Alignment,我要做的应该是这样的： …但是我的内部_-topdiv（红色背景）不是水平居中的，最终看起来是这样的：冲突似乎是在内部顶部div上使用显示：内联块“，这似乎使它垂直居中，除了两个div之间的奇怪间隔。这是我的密码： <!DOCTYPE html> <html> <head> <title> CSS sucks!!! </title> <

我要做的应该是这样的：

…但是我的

内部_-top

div（红色背景）不是水平居中的，最终看起来是这样的：

冲突似乎是在

内部顶部div上使用显示：内联块“，这似乎使它垂直居中，除了两个div之间的奇怪间隔。


这是我的密码：
<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS sucks!!!
        </title>

        <style type = "text/css">

            #outer {
                width: 250px;
                height: 500px;
                border: 5px solid black;

                /* for vertically-centering inner divs: */
                display: table-cell;
                vertical-align: middle;
            }
                    #inner_top {
                        width: 75px;
                        height: 175px;
                        background-color: red;

                        /* horizontally-centered: */
                        margin: 0 auto;

                        /* vertically-center both this and the bottom div:
                        (but now horizontal-alignment doesn't work on this div!) */
                        display: inline-block;

                    }
                    #inner_bottom {
                        width: 150px;
                        height: 150px;
                        background-color: blue;

                        /* horizontally-centered: */
                        margin: 0 auto;
                    }
        </style>
    </head>
    <body>
        <div id = "outer">

            <div id = "inner_top">
            </div> <!-- end of inner top -->

            <div id = "inner_bottom">
            </div> <!-- end of inner_bottom -->
        </div> <!-- end of outer div -->
    </body>
</html>


CSS很烂！！！
#外{
宽度：250px；
高度：500px；
边框：5px纯黑；
/*对于垂直居中的内部div：*/
显示：表格单元格；
垂直对齐：中间对齐；
}
#内顶{
宽度：75px；
高度：175px；
背景色：红色；
/*水平居中：*/
保证金：0自动；
/*垂直居中此div和底部div：
（但现在水平对齐在此分区上不起作用！）*/
显示：内联块；
}
#内底{
宽度：150px；
高度：150像素；
背景颜色：蓝色；
/*水平居中：*/
保证金：0自动；
}
您需要对所有试图居中的子元素使用边距：0 auto

具有边距：0 auto
的子项不能是块类型
您需要对所有试图居中的子元素使用边距：0 auto

具有边距：0 auto
的子项不能是块类型
只需使用这个简单的css块将它们居中即可
#内部顶部{
左边距：自动；
右边距：自动；
}
#内底{
左边距：自动；
右边距：自动；
}
只需使用这个简单的css块将它们居中即可
#内部顶部{
左边距：自动；
右边距：自动；
}
#内底{
左边距：自动；
右边距：自动；
}
我将您的代码放在一个JSFIDLE中，当我从顶部div的样式中删除display:inline块时，它就会工作。

看
仍然不确定你的评论“垂直居中这两个和底部div”来自何处；如果没有内联块，您似乎无法让它工作？
我将您的代码放在一个JSFIDLE中，当我从顶部div的样式中删除display:inline块时，它就会工作。

看
仍然不确定你的评论“垂直居中这两个和底部div”来自何处；如果没有内联块，您似乎无法让它工作？
当我删除显示：内联块时，这个示例对我来说很好…+1用于上面。哈哈，太棒了！我不敢相信我没有试过。。。嗯，我觉得自己像个傻瓜@MrLister——如果您将此作为答案发布，我将接受。当我删除显示：内联块
时，该示例对我来说很好…+1用于上面。哈哈，太棒了！我不敢相信我没有试过。。。嗯，我觉得自己像个傻瓜@MrLister——如果您将此作为答案发布，我将接受。margin:0 auto
在两个子元素中都存在，但正如您所说的display:inline block是问题所在。边距对内联元素根本不起作用。内联元素通过text align:center
居中margin:0 auto
出现在两个子元素中，但正如您所说的display:Inline block是问题所在。边距对内联元素根本不起作用。内联元素通过text align:center
居中margin:0 auto
已存在于内部顶部
和内部底部
CSS中，这与此等效。margin:0 auto
已存在于内部顶部
和内部底部
CSS中，这相当于这个。谢谢@MrLister。在测试了几个不同的东西之后，我开始混淆垂直对齐和水平对齐，其中display:inline blockset将使它们相邻对齐…谢谢@MrLister。在测试了几个不同的东西之后，我开始混淆垂直对齐和水平对齐，其中display:inline block设置”将使它们彼此相邻对齐。。。
/*display: inline-block;*/