复刻谷歌首页时如何实现图片与表单的水平垂直居中

当前代码无法实现logo+搜索框整体水平垂直居中，是三个基础逻辑错误导致的：

• 父容器<body>默认高度由内容撑开，没有占满浏览器视口高度，flex垂直居中缺少计算参照
• .centerflex容器仅设置了主轴（纵向）居中规则，缺少交叉轴（横向）对齐配置，子元素默认靠左排列
• 搜索输入框重复声明了两次class属性，后写的class会覆盖前值，导致样式匹配异常

1. 修复HTML标签错误 #

删除搜索输入框重复的class声明，修正后的输入框代码如下：

<input class="item" maxlength="2048" name="q" type="text" aria-autocomplete="both" aria-haspopup="false" autocapitalize="off" autocomplete="off" autocorrect="off" autofocus role="combobox" spellcheck="false">

其余HTML结构无需调整。

2. 修正SCSS样式 #

重点调整容器高度、flex对齐规则，补充基础视觉样式贴近谷歌首页效果：

@font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/productsans/v5/HYvgU2fE2nRJvZ5JFAumwegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
}

body {
    // 清除浏览器默认边距
    margin: 0;
    // 让body占满整个浏览器视口高度
    min-height: 100vh;
    font-family: Product Sans;
    font-size: 16px;
}

.center {
    display: flex;
    // 纵向排列子元素：logo在上，搜索框在下
    flex-direction: column;
    // 纵向（主轴）居中
    justify-content: center;
    // 横向（交叉轴）居中
    align-items: center;
    // 容器占满父级（body）的全部高度，给居中留出计算空间
    min-height: 100vh;
    // 控制logo和搜索框的间距，对齐谷歌首页的视觉比例
    gap: 30px;
}

.item {
    display: block;
}

// 控制logo尺寸
img.item {
    width: 272px;
    height: auto;
}

// 搜索框基础样式
input.item[type="text"] {
    width: 584px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid #dfe1e5;
    border-radius: 24px;
    font-size: 16px;
    &:hover {
        box-shadow: 0 1px 6px rgba(32,33,36,.28);
        border-color: rgba(223,225,229,0);
    }
}

$blue: #4285F4;
$red: #EA4335;
$yellow: #FBBC05;
$green: #34A853;
.googleText {
    align-items: center;
    font-size: 5vw;
    display: inline-block;
    text-align: center;
    &:nth-child(7n+1) {
        color: $blue;
    }
    &:nth-child(7n+2) {
        color: $red;
    }
    &:nth-child(7n+3) {
        color: $yellow;
    }
    &:nth-child(7n+4) {
        color: $blue;
    }
    &:nth-child(7n+5) {
        color: $green;
    }
    &:nth-child(7n+6) {
        color: $red;
    }
    &:nth-child(7n+7) {
        color: $yellow;
    }
}

• flex布局的居中规则生效的前提是容器有明确的、大于内容总高度的高度值，设置min-height: 100vh就是让容器高度等于浏览器可视区域高度，为居中计算提供基准
• 当flex设置为flex-direction: column纵向排列时，justify-content控制纵向对齐，align-items控制横向对齐，两个属性同时配置才能实现子元素的双向居中
• 用gap控制flex子元素间距，比单独给元素加margin更易维护，不会出现边距重叠问题

内容的提问来源于stack exchange，提问作者Nitro8923