現如今，越來越多的人通過手機來訪問網站或者應用程序，因此，我們需要確保我們的網站或者應用程序能夠適應不同尺寸的手機屏幕。
其中，css的自適應作用應運而生。如果你需要在不同的寬度中將元素居中，那么我們需要用到以下css：

/* 在父級元素中設置居中 */
.parent {
width: 100%;
text-align: center;
}
/* 在子級元素中設置 */
.child {
width: 80%;
max-width: 500px;
margin: 0 auto;
}

上述代碼中，我們設置了父級元素的寬度為100%并且設置了text-align:center，使得所有子元素都能夠在水平方向上居中。接著，在子元素中我們設置了其寬度為80%并且設置了最大寬度為500px，這樣可以確保元素大小合適并且不超過手機屏幕寬度。最后，我們設置了margin:0 auto，使得元素在水平方向上能夠自動居中。

需要注意的是，在進行自適應布局之前，我們需要確保我們的html頭部meta標簽中設置了viewport屬性，如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

這樣可以使得頁面在手機屏幕上有更好的展示效果。