如何在同一条线上居中2个或更多div？ （CSS）

Question

我对css居中有点问题：/
我在同一条线上有2个或更多的div，我希望它们的宽度彼此相等。 因此，如果有2个div，则1.和2. div必须与该区域具有相同的部分（50％和50％），并且这些div应该居中。

我的代码如下，但它无效。

<div class="main">
    <div class="xy">First</div>
    <div class="xy">Second</div>
</div>

CSS：

.xy {
    display: inline;
    margin: auto;
}
.main {
    height: 100%;
    width: 100%;
    background-color: #c0c0c0;
}

Answer 1

一个简单的解决方案是使用display: table和display: table-cell，如：

＆＃13;

＆＃13;

.xy {
  display: table-cell;/*set display to table-cell*/
  width: 50%;/*set the width to 50%*/
}
.main {
  height: 100%;
  width: 100%;
  background-color: #c0c0c0;
  display: table;/*set display to table*/
}

＆＃13;

<div class="main">
  <div class="xy">First</div>
  <div class="xy">Second</div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果您希望文字也是中心，可以在text-align: center中添加.xy：

＆＃13;

＆＃13;

.xy {
  display: table-cell;
  width: 50%;
  text-align: center;/*add text-align center*/
}
.main {
  height: 100%;
  width: 100%;
  background-color: #c0c0c0;
  display: table;
}

＆＃13;

<div class="main">
  <div class="xy">First</div>
  <div class="xy">Second</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

.xy {
    display: inline-block;
    margin: auto;
    widht: 50%
}

更改为内联块并以％表示宽度。