侧边栏壁纸
博主头像
luoxx博主等级

只要思想不滑坡,办法总比困难多

  • 累计撰写 51 篇文章
  • 累计创建 65 个标签
  • 累计收到 1,849 条评论

目 录CONTENT

文章目录

谷歌、必应搜索页面居中改造

luoxx
2022-03-17 / 11 评论 / 15 点赞 / 16,107 阅读 / 647 字
温馨提示:
本文最后更新于 2026-09-24,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除,邮箱地址:luoxmc@vip.qq.com 。

谷歌搜索整个页面基本上是靠左对齐的,这对大屏幕大分辨率或者带鱼屏用户极其不友好,老是要歪着头去看搜索结果,所以需要改造一下

修改之前效果

search-before

插件Stylus

Stylus 是一个调整网页外观的用户样式管理器。它可让您轻松地为许多热门网站网站安装主题和皮肤。

通过Stylus可以轻松的改变网页显示效果,所以只需要安装这个插件就可以比较灵活的自定义谷歌的搜索页面了。

插件安装地址:https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

如果谷歌的插件市场访问不了,我这边把插件上传了,需要直接下载,然后离线安装:
2.4.11版本(截止2026年9月24日最新版):https://pan.luoxx.top/s/4qRh5

插件配置

image-1647496503332

如图,插件配置好之后在右上角可以看到插件图标,在谷歌标签页点开之后点击域名就可以给当前该域名添加规则。
注意,代码上面的选择项,请选择【前缀】,域名填入【 https://www.google.com/search 】,这样的话就这个样式就只会影响到谷歌搜索,而不会影响到其他的谷歌站点。

iShot_2024-06-27_08.23.52

添加完样式之后保存即可

  • 2026年9月更新后的样式代码如下:
    (如果使用老的代码发现页面空白,可以试试一下新代码,将宽度写死为1200px,而不是自适应了)
@media (min-width: 1480px) {
    .GcKpu {
        display: flex;
        justify-content: center;
    }
    
    .Xx7Mif.E5eFb {
        left: 0;
    }

    body {
        max-width: 1200px;
        margin: 0 auto;
    }
}
  • 样式代码如下
@media (min-width: 1480px) {
    .GcKpu {
        display: flex;
        justify-content: center;
    }

    body {
        max-width: max-content;
        margin-left: auto;
        margin-right: auto;
    }
}

ps:该代码已在2024年更新,修复了一些元素显示错位的问题。
ps:样式代码来自这个油猴脚本 https://greasyfork.org/zh-CN/scripts/491490-center-google-search-page ,大家也可以直接安装这个插件实现居中。

修改后效果

search-after

必应搜索

跟上面的谷歌搜索搞法一样,必应搜索也可以实现居中

iShot_2024-06-26_17.31.25

如图,新建样式的时候,代码上面的选择器选择【前缀】,后面的域名填 https://www.bing.com/search

样式代码如下:

@media (min-width: 1529px) {
	body {
		max-width: 1440px;
		margin-left: auto;
		margin-right: auto;
	}
}
参考文档

https://salmon853.substack.com/p/32f

15

评论区