【CSS 学习总结】第九篇 - CSS 布局-居中布局-水平垂直居中布局

BraveWang
154 阅读4分钟

「这是我参与11月更文挑战的第28天，活动详情查看：2021最后一次更文挑战」。

一，前言

上一篇，主要介绍了 5 种垂直居中效果的实现方案、原理及优缺点，主要涉及以下几个点：

  • 文本、行内元素、行内块级元素的垂直居中；
  • 图片的垂直居中；
  • 利用table-cell，实现单个块级元素的垂直居中；
  • 使用绝对定位+反向移动，实现单个块级元素的垂直居中；
  • 使用flex布局，实现单个块级元素的垂直居中；

本篇，介绍 CSS 布局-居中布局-水平垂直居中布局；

二，水平垂直居中布局简介

水平垂直居中布局：指当前元素在父元素容器中，水平垂直方向都是居中显示的；

前面，介绍了实现水平居中的 5 种方案，和实现垂直居中的 5 种方法；

实现水平垂直居中效果，共有 3 种方案（5 种实现）：

  • 利用table-cell实现；
  • 使用position定位实现；
  • 利用flex弹性布局实现；

三，利用 table-cell 实现（1 种）

原理

利用 CSS table 布局：

  • 垂直方向居中：
    • 父容器设置table-cell，相当于将其转化为td;
    • 父容器设置vertcal-align，实现垂直方向居中对齐；
  • 水平方向居中：根据内部是行内内容或块级内容采取不同的实现方式：
    • 若内部是行内元素：父容器设置text-align: center控制本文在水平方向居中;
    • 若内部是块级元素：子容器设置margin: 0 auto;浏览器自动计算并分配，实现水平方向居中；

示例

行内元素的水平垂直居中：

<style>
.parent{
  display: table-cell;
  vertical-align: middle; /* 垂直方向居中*/
  text-align: center; /* 行内元素水平居中 */
}
.child{
  display: table;
}
</style>

<div class="parent">
  <div class="child">水平垂直居中</div>
</div>

块级元素的水平垂直居中：

<style>
.parent{
  display: table-cell;
  vertical-align: middle; /* 垂直方向居中*/
}
.child{
  display: table;/* table 或 block */
  margin: 0 auto; /* 块级元素水平居中 */
}
</style>

<div class="parent">
  <div class="child">水平垂直居中</div>
</div>

优点

  • 实现简单；
  • 适用于宽高未知的场景；
  • 兼容性好（需要 IE 8+）；

缺点

这种水平垂直居的实现方案，使用了text-align具有继承性；

所以，当父元素中存在文字时，默认也会是居中效果；

四，利用 position 定位实现（3 种）

原理

  • 使用绝对定位：父元素设置相对定位，子元素设置绝对定位；
  • 设置子元素相对父元素尺寸的top、right、bottom、left值；
  • 再设置相对子元素自身尺寸的margin或transform，进行反向移动，实现水平垂直居中效果;

示例

<style>
.parent{
  position: relative;
}
.child{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  /* 定宽高事，等同于margin-top：负自身宽度的 50% */
  /* margin-top: -自身高度的50% */
}
</style>

<div class="parent">
  <div class="child">水平垂直居中</div>
</div>
  • 给父元素设置相对定位，子元素设置绝对定位；
  • 为子元素设置相对父元素top、left 各 50%
  • 再反向移动，实现水平垂直居中：
    • 1）自身高度、宽度各 50%；
    • 2）transform 控制 X、Y 轴反向平移50%；

组合两种效果，从而达到几何上的水平垂直居中效果；

利用定位实现水平垂直居中效果，共有 3 种方法：

  • 1，方位 50% + margin 反向移动宽高 50%；
  • 2，方位 50% + transform 反向移动宽高 50%；
  • 3，将 4 个方位全部设置为 0，再设置margin: auto；

方法三思路说明：

  • 水平方向居中： 当方位left、right同时被设置为 0 时，会自动进行拉伸；再设置margin: auto，即可实现水平居中效果；
  • 垂直方向居中：方位top、bottom同时设置为 0；

优点

  • 使用 margin 负值做反向移动的兼容性相对较好；
  • 不管是块级还是行内元素都可以实现水平垂直居中效果；

缺点

  • 代码实现较复杂，需要理解；
  • 由于使用了定位，会导致脱离文档流；
  • transform 的兼容性不好（需要 IE9+）

五，利用 flex 弹性布局实现（1 种）

原理

通过 CSS3 的 flex 弹性布局，控制元素水平、垂直方向居中对齐即可;

两个属性 justitfy-content、align-item效果叠加，实现水平垂直居中；

示例

<style>
.parent{
  display: flex;
  align-items:center;    /* 垂直方向居中 */
  justify-content:center;/* 水平方向居中 */
  border: 1px solid red;
  height: 100px;
  width: 300px;

}
.child{
  width: 50px;
  height: 40px;
  border: 1px solid blue;
}
</style>

<div class="parent">
  <div class="child">水平</div>
  <div class="child">垂直</div>
  <div class="child">居中</div>
</div>
  • flex 布局，默认内部子元素的对齐方式为水平对齐；
  • 水平方向，通过设置justitfy-content，控制元素水平居中;
  • 垂直方向，通过设置align-item，控制子元素垂直居中;

优点

  • 实现简单、功能强大；
  • 支持多个子元素整体水平居中；

缺点

  • 在 PC 端存在兼容性问题；
  • 移动端需要 Android 4.0+；

六，结尾

本篇，主要介绍了水平垂直居中效果的实现方案（3 种方案 5 种实现）、原理及优缺点，主要涉及以下几个点：

  • 利用table-cell，实现水平垂直居中效果；
  • 利用position定位，实现水平垂直居中效果；
  • 利用flex弹性布局，实现水平垂直居中效果；

下一篇，介绍 CSS 布局-多列布局-两列布局；

avatar
文章
阅读
粉丝