Css 默认情况下居中对齐DIV和左对齐

我让DIV标签左右浮动。默认情况下，右DIV是隐藏的。当右DIV隐藏时，我希望在默认情况下在中间显示第一个DIV，当右DIV可见时，我希望向左移动。你能建议一下吗

<div id="main">
    <div id="left1" style="width: 50%; float: left">
        <a href id="link">link</a>
    </div>
    <div id="right1" style="width: 50%; float: right; display:none"></div>
</div>

---

按如下方式重新排列html：

    <div id="main">
        <div id="right1" >
        </div>
        <div id="left1">
          <a href id="link">link</a>
        </div>
    </div>

---

下面是一个使用实际浮动的javascript示例

HTML

JS（使用jquery）

---

在什么条件下右div可见？javascript是一个选项吗？我在点击超链接时使用javascript函数。

#main {
    text-align: center;
}

#left1 {
    display: inline-block;
    width: 50%;
    text-align: left; /* if you need it left */
}

#right1 {
    width: 50%;
    float: right;
}

<div id="main">
  <div id="left1" class="element center">
    <a href="#" id="show">Show</a>
  </div>
  <div id="right1" class="element hidden">
    Text
  </div>
</div>

.left {
  float: left;
}
.right {
  float: right;
}
.center {
  text-align: center;
}

.element {
  width: 50%;
}

.hidden {
    display: none;
}

$(document).ready(function() {
  $("#show").click(function() {
    $("#left1").toggleClass("left center");
    $("#right1").toggleClass("right hidden");
  });
});