css水平垂直居中

| 字数 896
  1. 1. 水平垂直居中
    1. 1.1. 有确定的宽高
    2. 1.2. 宽高不确定
    3. 1.3. 利用伪元素来实现
  2. 2. 常用技巧
    1. 2.1. 左边栏
    2. 2.2. 内/外/四周阴影法:
    3. 2.3. 单行居中,俩行居左,超过俩行省略。
    4. 2.4. 短小标题的快速水平垂直居中法
  1. 1. 水平垂直居中
    1. 1.1. 有确定的宽高
    2. 1.2. 宽高不确定
    3. 1.3. 利用伪元素来实现
  2. 2. 常用技巧
    1. 2.1. 左边栏
    2. 2.2. 内/外/四周阴影法:
    3. 2.3. 单行居中,俩行居左,超过俩行省略。
    4. 2.4. 短小标题的快速水平垂直居中法

水平垂直居中

水平垂直居中是老生常谈的话题,也是面试官比较喜欢问的问题。下面我对在实际中常常运用的几种方式做总结。HTML结构如下(这里我默认wrapper水平垂直居中):
  

1
2
3
  <div class="wrapper">
<div class="goal"></div>
 </div>

有确定的宽高

一般常用在包含众多div的容器层(常称为wrapper,这里一般美工都会标注好宽高)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  .wrapper {
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
width: 200px;
height: 200px;
background-color: #ccc;
}
.goal {
position: relative;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
width: 100px;
height: 100px;
background-color: deeppink;
}

这样就实现了goal水平垂直居中。

宽高不确定

可能更多地时候我们并不知道div的宽高,我们还需要实现水平垂直居中。那么我们可以这样做:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  .wrapper {
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
width: 200px;
height: 200px;
background-color: #ccc;
}
.goal {
position: absolute;
top: 50%;
left: 50%;
background-color: deeppink;
      transform: translate(-50%, -50%);
}

而对于手机端来说我们更多的是采用flex布局的方式来实现水平垂直居中。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  .wrapper {
       display: -webkit-flex;
       display: flex;
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
       -webkit-align-items: center;
       align-items: center;
       -webkit-justify-content: center;
       justify-content: center;
width: 200px;
height: 200px;
background-color: #ccc;
}
.goal {
position: absolute;
top: 50%;
left: 50%;
background-color: deeppink;
       transform: translate(-50%, -50%);
}

也就是为.wrapper这个容器div设置水平/垂直(justify-content/align-items)的对齐方式,均设置为居中后容器中的.goal项目div自然水平垂直居中。(在flex布局中常把外层称为容器,内层div称为项目。)

利用伪元素来实现

利用伪元素可以避免使用margin时在IE中的bug问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  .wrapper {
width: 200px;
height: 200px;
       text-align: center;
background-color: #ccc;
}
.goal {
display: inline-block;
width: 100px;
height: 100px;
vertical-align: middle;
background-color: deeppink;
}
   .wrapper:after {
content: ' ';
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
background-color: deeppink;
   }

该方法的重点在于利用伪元素给goal这个div提供vertical-align所需的对齐中心点。详情可以参考我的上一篇微研究:CSS:使用伪元素做水平垂直居中的微深入研究

常用技巧

左边栏

      左边栏的常用实现方式有很多,这里我们介绍几种常用方式:

  • 边框法:
    border-left: 5px solid blue;
  • 伪元素法:
1
2
3
4
5
6
7
8
9
   div:after {
     content: ' ';
     position: absolute;
     top: 0;
     left: 0;
     width: 5px;
     height: 60px;
     background-color: blue;
   }

内/外/四周阴影法:

1
2
box-shadow:-5px 0px 0 0 blue;/box-shadow:inset 5px 0px 0 0 blue;/ box-shadow: 0 0 5px blue
(box-shaow 不占用元素的宽高哦)

单行居中,俩行居左,超过俩行省略。

   
主要实现依靠:

1
2
3
display: -webkit-box; // 设置display,将对象作为弹性伸缩盒子模型显示
   -webkit-line-clamp: 2; // 限制在一个块元素显示的文本的行数
    -webkit-box-orient: vertical; // 规定框的子元素应该被水平或垂直排列

具体实现可以参考这篇文章:单行居中,两行居左,超过两行省略

短小标题的快速水平垂直居中法

练手的项目中要实现一列菜单,菜单中的小标题需要水平垂直居中:

对于这种情况常用table布局。如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  .menu-item {
display: table;
width: 56px;
height: 49px;
padding: 0 12px;
text-align: center;
.text {
display: table-cell;
width: 56px;
vertical-align: middle;
.border_1px(rgba(7, 17, 27, .1));
font-size: 12px;
}
}

只需要在父元素.menu-item中添加display:table,在子元素(需要水平垂直居中的元素)中添加display:table-cell;vertical-align:middle即可。