「前端面试」CSS 如何实现水平居中和垂直居中
腐烂的橘子
1603
2021.01.23
2021.01.25
发布于 未知归属地
定位前端JavaScript腐烂的橘子居中水平居中垂直居中求职面试

图片 1.png

答案

水平居中的方式：

text-align: center; /* inline 元素 */
margin: auto; /* block 元素（重要） */
display: flex; justify-content: center; /* 多个块级，flex 布局（重要） */
text-align: center; display: inline-block; /* 多个块级，转化为行内元素（重要） */
left: 50%; margin-left: 负值 /* absolute 元素（重要） */

垂直居中的方式：

display: table-cell; vertical-align: middle; /* inline 或 line-block 元素 */
top: 50%; margin-top: -x;  /* 1.  需要知道子元素的宽度和高度（重要） */
top; 0; left: 0; bottom: 0; right: 0; margin: auto;  /* 2.（重要）*/
transform: translate(-50%, -50%);/* 3.（重要） */
align-items: center /* 4. flex 布局（重要） */
line-height: x; heigth: x; /* inline 元素 （重要）*/

解读

  1. 水平居中

    1. 行内元素的水平居中
    2. 块级元素的水平居中
    3. 多个块级元素的水平居中
    4. absolute 元素的水平居中

  2. 垂直居中

    1. 行内元素的垂直居中
    2. 块级元素的垂直居中
    3. 非替代行内元素或块级元素的垂直居中

水平居中

了解这个问题之前，首先要明白以下三点：

  • 行内元素 与 块级元素 都是 HTML 元素；
  • 行内元素不会另起一行（如 <img>，<a>，<strong>等），块级元素会另起一行（如 <p>，<div>，<ul> 等）；
  • 两者的关系是：行内元素中只能包含行内元素，而块级元素中既能包含行内元素、又能包含其他块级元素。
行内元素的水平居中

如果该元素是行内元素，只需设置 text-align: center; 即可实现水平居中。如图，我们看到文本在 <textarea> 元素中实现了水平居中。

CSS
HTML
.center {
  text-align: center;
}

image.png

块级元素的水平居中

对于块级元素，我们只需设置块级元素左右外边距 margin-left 和 margin-right 为 auto，

CSS
HTML
.center {
  background: #118492;
  width: 100px; /* 必须设置 width，否则，请使用 display: table */
  /* 0 代表 margin-top 和 margin-bottom 
   * auto 代表 marin-left 和 margin-right
   */
  margin: 0 auto; 
}

image.png

多个块级元素的水平居中

有两种方法：

第一种方法是采用 flexbox 布局。转化为 flexbox 布局的方法为 display: flex，该布局下的元素默认为块级元素，如果要转化为行内元素，则设置 display: inline-flex。

那么，要在 flexbox 布局下设置水平居中，只需将多个块级元素的父元素设置为 justify-content: center 即可。

CSS
HTML
#container {
  display: flex;
  justify-content: center;
}

#container div {
  margin: 0 50px;
  background: #336677;
}

image.png

第二种方法是将这多个块级元素转化为行内元素 display: inline-block，然后在父级元素上设置 text-align: center，同样可以达到与行内元素一样的效果。

CSS
HTML
#container {
  text-align: center;
}

.inline {
  display: inline-block;
  margin: 0 30px;
  background: #336677;
}

image.png

absolute 元素的水平居中

如果该元素具有属性 position: absolute，则首先设置 left: 50% 将该元素盒子左边居中，然后设置 margin-left: 负值 将元素左移自身宽度一半距离即可实现水平居中。

CSS
HTML
.father {
  position: relative;
}

.child {
  position: absolute;
  background: green;
  width: 400px;
  left: 50%;
  margin-left: -200px; /* 盒子宽度 400px, 因此左移 200px */
}

image.png

垂直居中

行内元素的垂直居中

当该元素是 inline 行内元素或 line-block 时，可以将父级元素设置为 display: table-cell，然后设置 vertical-align: middle 可以实现垂直居中。

CSS
HTML
.father {
  background: green;
  height: 200px;
  display: table-cell;
  vertical-align: middle;
}

image.png

块级元素的垂直居中

有以下四种方法：

  • 绝对定位和 margin 负值
  • 绝对定位和 margin auto
  • transform
  • flex 布局

第一种，将子元素设置为绝对定位，再设置 top: 50% 和 margin: 负值 即可实现垂直居中。注意这里需要定义 height: x，这时才能得到 margin: -x/2。

CSS
HTML
.father {
  position: relative;
  background: green;
  width: 200px;
  height: 200px;
}

.child {
  position: absolute;
  background: yellow;
  height: 100px;
  top: 50%;
  margin-top: -50px; /* 大小为 height 的一半 */ 
}

如图，我们通过设置 top: 50% 和 margin: 负值 将黄色的块级元素在父元素中实现了垂直居中。

image.png

第二种比较简单，即设置 top、left、right、bottom 为 0，和 margin: auto 即可实现自动分配垂直居中。

CSS
HTML
.child {
  position: absolute;
  background: yellow;
  width: 200px;
  height: 100px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

image.png

如图，黄色块级元素处于水平垂直居中的状态。

第三种，通过 transform 属性来设置，这是 CSS3 的新特性。首先，设置 top: 50%; left: 50%; 将黄色区域左上角的点置于中心，然后设置 transform: translate(-50%, -50%); 将黄色块级元素向左向上移动自身宽高的一半距离，实现水平垂直居中。

CSS
HTML
.child {
  position: absolute;
  background: yellow;
  width: 200px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

image.png

第四种，通过在父元素中使用 flexbox 布局中的垂直居中属性 align-items: center 实现垂直居中。

CSS
HTML
.father {
  display: flex;
  align-items: center;
  background: green;
  width: 200px;
  height: 100px;
}

.child {
  background: yellow;
}

如图，黄色块级元素在父元素中实现了垂直居中。

image.png

非替代行内元素或块级元素的垂直居中

我们可以设置 height 的值与 line-height 的值相等，即可实现非替代行内元素或块级元素的垂直居中。

CSS
HTML
#vertical {
  height: 200px;
  width: 400px;
  line-height: 200px;
}

个人原创，疏漏之处在所难免，如有任何问题欢迎提出，一起讨论共同进步，谢谢～

评论 (0)