css 两个div水平居中显示

CSS是网页设计中非常重要的一部分，其中包括了许多常用的布局技巧，例如如何把两个div元素水平居中显示。

  #container {
        text-align: center;
  }
  #left-box, #right-box {
        display: inline-block;
  }

上面的代码是实现两个div元素水平居中的CSS样式，需要将这段代码放在HTML文件的style标签中，在div元素中设置对应的ID名。下面对代码的每一行做一些解释：

#container { text-align: center; }

这一行代码是将父级元素的文本属性设置为居中，这样子元素div在父级元素中就可以水平居中显示。

#left-box, #right-box { display: inline-block; }

这一行代码是将两个子元素div的display属性设置为inline-block，这样子元素就可以在同一行显示。

以上两行CSS代码结合起来就能实现两个div元素在同一行水平居中显示的效果。

另外，也可以使用flex布局来实现同样的效果：

  #container {
        display: flex;
        justify-content: center;
  }
    

以上代码将父级元素的display属性设置为flex，justify-content属性设置为center，就能实现两个子元素div水平居中的效果。

无论是传统的inline-block布局还是现代的flex布局，都能实现两个div水平居中显示的效果，可以根据实际需求选择使用不同的布局方式。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！