我想在页面的背景上做一个渐变，中间是浅蓝色，左右对称地变成深蓝色.我制作了从左到右的渐变，但没有我希望的对称性.
我想把身体部分分成两个50%宽度的div:浮动:Left，并将左侧的设计为右侧的镜像，但我相信有一个更容易、更短的方法.我还担心只为 colored颜色 创建两个div可能会导致以后的div出现问题.
以下是我用HTML和CSS编写的代码:
body {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: linear-gradient(to right, #3498db, #162ba4);
}
.main-container {
padding: 20px;
background: rgba(244, 228, 228, 0.532);
/* main divs color */
border-radius: 20px;
backdrop-filter: blur(10px);
/* blur */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
/* shadow */
}<div class="main-container">
<!-- content -->
<h1>My page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
</div>