CSS從中間向兩邊的實現，可以通過使用偽元素:before和:after來達到，以及使用text-align和transform屬性來設置文本的水平和垂直居中。在前面提到的:before和:after偽元素中，可以添加content屬性，然后利用width: 50%的寬度，把文本分為兩半，再設置float屬性和text-align屬性，讓文本水平居中和向兩邊對齊。如下所示：

/* 明確在一個容器中的文字是要實現的效果 */
.container {
position: relative;
}
.container:before,
.container:after {
content: "";
position: absolute;
top: 0;
height: 100%;
width: 50%;
background: red;
z-index: -1;
}
.container:before {
left: 0;
}
.container:after {
right: 0;
}
.container p {
position: relative;
text-align: center;
z-index: 1;
}

可以看到，在偽元素:before和:after中使用了position屬性，將偽元素分別設置為左側和右側的半個背景，占據了容器中的一半。然后在p標簽中使用了text-align居中文本，同時z-index屬性放在最上方，使它能夠出現在偽元素背景之上。

除此之外，還可以使用transform屬性在p標簽內部實現更加靈活的實現水平和垂直兩個方向的對齊。

.container p {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

使用transform: translate(-50%, -50%)實現方向為垂直和水平的居中，同時也可以結合使用text-align等屬性來達到一些需要特殊排版的場景。總之，CSS提供了多種實現中心向兩邊的方式，根據不同的需求可以靈活運用。