CSS中有很多方式可以實(shí)現(xiàn)網(wǎng)頁元素的布局，其中不乏左右靠邊和中間居中的需求。本文將介紹幾種實(shí)現(xiàn)這種布局方式的CSS技巧。
1. 左右靠邊
實(shí)現(xiàn)左右靠邊的布局最常用的方法是使用float屬性。將需要靠左的元素設(shè)置為float:left;，需要靠右的元素設(shè)置為float:right;。這樣做的好處是可以讓元素在同一行顯示，并且不會重疊。
例如，下面是一個(gè)左右靠邊的布局示例：

<div class="container">
<div class="left">左邊的內(nèi)容</div>
<div class="right">右邊的內(nèi)容</div>
</div>
<br>
<style>
.container {
width: 100%;
overflow: hidden;
}
.left {
float: left;
width: 30%;
}
.right {
float: right;
width: 30%;
}
</style>

在這個(gè)例子中，容器div的寬度為100%，設(shè)置overflow:hidden可以使兩個(gè)浮動元素在一行顯示。并且因?yàn)閮蓚€(gè)元素的寬度分別為30%，所以它們之間會有一定的間隔。
2. 中間居中
實(shí)現(xiàn)中間居中的布局同樣有多種方法，其中比較常用的是使用margin屬性。將需要居中的元素設(shè)置為margin:0 auto;，即可實(shí)現(xiàn)水平居中。
例如，下面是一個(gè)中間居中的布局示例：

<div class="container">
<div class="content">居中的內(nèi)容</div>
</div>
<br>
<style>
.container {
width: 100%;
text-align: center;
}
.content {
width: 50%;
margin: 0 auto;
}
</style>

在這個(gè)例子中，容器div的寬度依然是100%，但是使用text-align:center可以使內(nèi)部元素居中。居中的元素除了設(shè)置寬度為50%外，還設(shè)置了margin:0 auto;使得它水平居中。
除了以上兩種方式，還可以使用flex布局、絕對定位和CSS Grid等來實(shí)現(xiàn)網(wǎng)頁元素的布局。不同的布局方式適用于不同的場景，需要根據(jù)具體情況選擇相應(yīng)的方法。