如何使两个已右对齐的组件整体在页面居中显示？

问题出在你用来包裹的div默认是块级元素，宽度占满整个父容器，margin: 0 auto在这种情况下不会有任何视觉效果——因为元素已经撑满了可用空间，没有多余的边距可以分配。

要实现整体居中，你需要让包裹div的宽度贴合内部两个组件的总宽度，再配合margin: 0 auto生效。这里有两种简单的实现方式：

方式1：设置固定宽度 #

如果你知道两个组件的总宽度，可以直接给包裹div指定宽度：

<div style={{ margin: "0 auto", width: "250px" }}> 
  <Countdown />
  <h3>'til 😴</h3>
</div>

调整width的值到合适大小，确保能容纳两个组件即可。

方式2：让容器宽度自适应内容 #

如果不想写死宽度，可以通过修改display属性让容器自动收缩到内容宽度：

<div style={{ margin: "0 auto", display: "table" }}> 
  <Countdown />
  <h3>'til 😴</h3>
</div>

display: table会让容器宽度自适应内部元素的总宽度，同时保持块级元素的特性，margin: 0 auto就能正常工作，把整个容器推到页面中央。

两种方式都能保留内部组件textAlign: right的右对齐效果，实现你要的整体居中需求。

内容的提问来源于stack exchange，提问作者opulentgnu