我用白色，红色，白色创建了一个渐变，如下所示：
background: -webkit-linear-gradient(left, white , red, white);
background: -o-linear-gradient(right, white, red, white);
background: -moz-linear-gradient(right, white, red, white);
background: linear-gradient(to right, white , red, white);
在这里您可以看到演示：http://jsfiddle.net/mmMVN/43/
我当时想要实现的是：
1.白色直到盒子的30％
2.红色从盒子的30-70％
3，然后再次使用白色，剩下30％的盒子。
表示红色部分正好在盒子中间
所以我所做的是：
background: -webkit-linear-gradient(left, white 30%, red 70%, white 100%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, white 30%, red 70%, white 100%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, white 30%, red 70%, white 100%); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, white 30%, red 70%, white 100%); /* Standard syntax (must be last) */
但这并没有使红色部分居中，而是将其移到了右侧部分。演示：http://jsfiddle.net/mmMVN/41/
如何使红色部分居中？谢谢
最佳答案
您可以尝试以下方法：
#grad1 {
height: 200px;
background: -webkit-linear-gradient(left, white 30%, red 50%, white 70%);
background: -o-linear-gradient(right, white 30%, red 50%, white 70%);
background: -moz-linear-gradient(right, white 30%, red 50%, white 70%);
background: linear-gradient(to right, white 30%, red 50%, white 70%);
}<div id="grad1"></div>问题出在您的百分比重新分配上：
right, white 30%, red 70%, white 100%
表示白色将以30％开始，红色将以70％充满，然后淡出为100％的白色
OP评论后更新：
#bck {
height: 200px;
background: red;
margin-left: 30%;
width: 40%;
}<div id="bck"></div>