当前位置：首页 > article >正文

【CSS 知识总结】第七篇 - CSS 布局-居中布局-水平居中布局

article 2024/11/14 1:49:45

一，前言

上一篇，主要对 CSS 布局进行了概括性介绍，主要涉及以下几个点：

CSS 布局简介、布局的发展历史；
CSS 布局技巧、常见布局效果，面试题；

本篇，开始介绍 CSS 布局-居中布局-水平居中布局；

二，水平居中布局简介

水平居中布局：指子元素在父元素中，水平方向是居中显示的；

实现水平居中效果的 5 种方案：

inline-block + text-align 属性配合使用；
table + margin 属性配合使用；
absolute + margin 属性配合使用；
absolute + transform 属性配合使用；
flex + justify-content 属性配合使用；

三，水平居中布局的实现

1，文本/行内元素/行内块级元素

原理

text-align 的翻译是：“文字对齐”，包含：左对齐、右对齐、居中对齐；
text-align 能够控制行内内容（如：文字、行内元素、行内块级元素），在其块级父元素中的对齐方式；

示例

<style>
.parent{
  text-align:center;
}
</style>

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

利用text-align属性，通过为块级容器设置text-align:center;，控制行内内容实现水平居中对齐效果；

优点

实现简单、可读性好、兼容性好；

缺点

text-align文本对齐属性具有继承性，导致失效；

为父容器设置的文本对齐属性，将会被子元素所继承；

当子元素宽度 > 父元素宽度时，水平居中效果会出现问题；

2，单个块级元素

原理

当子容器定宽时，设置margin：0 auto浏览器会自动计算并均分水平方向上的剩余空间，从而达到水平居中效果；

备注：如果上下 margin 也设置为 auto，计算值将会为 0 导致失效；

示例

<style>
.child{
  width:100px;
  margin: 0 auto;
}
</style>

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

子容器定宽，并设置 margin:0 auto;，浏览器将自动计算并均分水平方向上的剩余空间，实现水平居中效果；

优点

实现简单、可读性好、兼容性好；

缺点

子容器必须定宽，且不能被设置为 auto；
当子元素宽度 > 父元素宽度时，水平居中效果会出现问题；

3，多个块级元素

多个块级元素如何整体在父元素内水平居中？

原理

借助text-align属性特性：只能控制文本对齐（文字、行内元素、行内块级元素）；
通过display:inline-block将块级元素转为行内块，并设置text-align:center，达到子元素整体水平居中效果；

示例

<style>
.parent{
  text-align: center;
}
.child{
  display: inline-block;
}
</style>

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

优点

实现简单、可读性好、兼容性好；

缺点

行内块元素和行内元素，会受到换行符的影响而产生默认间距；

由于将块级子元素转化成为行内块，两个行内块之间就会产生默认间距；

此时，可以通过为父元素设置font-size: 0去除这个默认间距；

但是，font-size: 0还会产生一个新的问题：子元素中的文字会因字体大小为 0 导致不显示；

所以，还需要再为子元素设置一个字体大小，才能完美解决问题；

4，任意个元素

原理

利用 flex 弹性布局，设置主轴方向上的对齐方式为居中对齐；

示例

<style>
.parent{
  display: flex;           /* 使用 flex 布局*/
  justify-content: center; /* 设置主轴方向上的对齐方式 */
}
</style>

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

通过设置display: flex;，使用 flex 布局，默认水平方向排列；
通过设置justify-content属性，能够实现多个子元素整体在父元素内部的水平居中效果；

优点

实现简单、功能强大；
无需考虑子元素的数量；

缺点

flex 是 css3 新增的响应式布局方案，主要面向移动端，

所以 PC 端使用存在兼容问题，移动端需要 android 4.0+；

5，使用绝对定位实现

原理

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

备注：实现反向移动的两种方法：margin或transform；

示例

<style>
.parent{
  position:relative;/* 相对定位 */
}
.child{
  position:absolute;/* 绝对定位 */
  left:50%;
  transform:translateX(-50%);
  /* margin-left:-父元素宽度/2  */
}
</style>

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