如何在响应式设计中实现元素的垂直居中

响应式设计中实现元素的垂直居中

一、响应式设计

响应式设计是一种Web设计方法，它可以根据用户设备的不同屏幕尺寸和分辨率，自适应地调整页面的布局和内容，以提供最佳的用户体验。响应式设计的目标是确保用户可以在任何设备上浏览网站或应用程序，无论是台式电脑、平板电脑还是手机，都可以轻松地查看和交互内容。

1. 实现方法

响应式设计一般通过媒体查询和弹性网格布局来实现，媒体查询是一种CSS3属性，可以针对不同的屏幕尺寸设置不同的样式，当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。弹性网格布局是一种可以自适应调整网页布局的方法，它使用相对单位来定义页面元素的尺寸，从而保证在不同设备上呈现相同的比例和布局。
媒体查询：@media （媒体类型） and （媒体特性）{设置样式}；（* IE9以上兼容）
媒体类型：一般用的较多的是screen 电脑屏幕 和 all 所有设备；
媒体特性：一般设置最大宽度（max-width）和最小宽度（min-width）；

/* 最大宽度是1366px，浏览器宽度小于等于1366px的时候，执行里面的样式 */
@media screen and (max-width: 1366px) {
    .box {
        width: 100%;
        margin-top: 40px;
    }
}

/* 最大宽度是1366px，最小宽度是1024px，浏览器宽度小于等于1366px同时大于等于1024px的时候，执行里面的样式 */
@media screen and (max-width: 1366px) and (min-width: 1024px) {
    .box {
        width: 100%;
        margin-top: 40px;
    }
}

2. 使用场景

一般应用在响应式网站，例如企业官网；大屏展示看板，例如大屏场景数据分析看板；

二、如何实现元素居中

要实现元素的居中，针对于居中元素的参照元素（一般是父级元素）在这里我们统一称为 父元素 ，首先父元素得有一个指定得宽高，可以用媒体查询实现不同分辨率下宽高不同，但是对于每个分辨率下需要剧中的元素对应的父元素必须要有一定宽高。

1. 定位来实现

响应式中居中元素往往是没有固定宽高的，随着分辨率改变往往会添加不同样式来使宽高发生改变，在这里定位top：50%，margin-top：负的元素高度一半，这个一半就不好确定了，所以要利用CSS3的 transform: translate(X, Y) 属性来实现

<!-- 父元素 -->
<div class="parentBox">
  <!-- 子元素 -->
  <div class="childenBox">
  	<p>我是一个子元素</p>
    <p>这是我的居中效果</p>
  </div>
</div>

<!-- css -->
<style>
.parentBox {
  width: 800px;
  height: 500px;
  background: #ccc;
  position: relative;  /* 父级元素相对定位 */
}
.childenBox {
  background-color: #ff0000;
  color: #fff;
  position: absolute;  /* 子级元素绝对定位 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);  /* 向左、上平移一半据距离 */
}
</style>

2. flex布局来实现

也叫弹性布局，对父盒子设置成弹性布局，他的所有子元素自动成为容器成员，称为flex项目item。容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction来决定主轴的方向。每个轴都有自己的起点和终点。
单个子元素

<!-- 父元素 -->
<div class="parentBox">
  <!-- 子元素 -->
  <div class="childenBox">
  	<p>我是flex布局</p>
    <p>这是我的居中效果</p>
  </div>
</div>

<!-- css -->
<style>
.parentBox {
  width: 800px;
  height: 500px;
  background: #ccc;
  position: relative;  /* 父级元素相对定位 */
}
.childenBox {
  background-color: #ff0000;
  color: #fff;
  position: absolute;  /* 子级元素绝对定位 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);  /* 向左、上平移一半据距离 */
}
</style>

多个子元素

<!-- 父元素 -->
<div class="parentBox">
  <!-- 子元素 -->
  <div class="childenBox">
  	<p>我是flex布局</p>
    <p>这是我的居中效果</p>
  </div>
  <div class="childenBox">
  	<p>我是flex布局</p>
    <p>这是我的居中效果</p>
  </div>
  <div class="childenBox">
  	<p>我是flex布局</p>
    <p>这是我的居中效果</p>
  </div>
</div>

<!-- css -->
<style>
.parentBox {
  width: 800px;
  height: 500px;
  text-align: center;
  background: #ccc;
  display: flex;  /* 设置flex布局 */
  align-items: center;  /* 直接子元素垂直居中 */
  justify-content: center;  /* 直接子元素水平居中 */
}
.childenBox {
  background-color: #ff0000;
  color: #fff;
  margin: 0 10px;
}
</style>

垂直居中+水平居中：justify-content: center;

垂直居中+水平分散对齐：justify-content: space-between; /* 直接子元素水平两端对齐 */

三、总结

定位实现居中：
优点：对DOM结构没有特定要求，居中元素和父元素之间没有层级限制，居中元素可以是父元素的一级子元素，也可以是二级子元素等等，只取决于相对和绝对定位的对象关系。
适用场景：适用于单个子元素需要实现垂直居中时
flex布局实现居中：
优点：可实现单个或多个子元素同时垂直居中。
缺点：对DOM结构有要求，居中元素必须是父元素的直接一级子元素。
适用场景：适用于多个子元素需要实现垂直居中时。

以上是个人经验，希望对大家有多帮助！

需要在HTML中实现元素垂直居中的方法还可以参考以下文章：
【CSS】HTML中实现元素垂直居中的方法汇总