當(dāng)你和面試官吹逼伴榔，或者面試官和你吹逼的時候可以拿來一用

1、2扩所、6嫉入、7用的較多

1.絕對定位

需要指定子元素高度,不然會占滿容器

.container{
  position:relative;
}
.element{
  position:absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
  height: 20px; 
}

2.transform

可能會妨礙其他的動畫

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

3.table與table-cell

一言難盡的東西壁查。觉至。。

.container{
  display: table;
  height: 100%;
}
.element{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

4.偽元素

利用容器的偽元素睡腿，修改容器的baseline為middle语御，很巧妙

.container::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-left: -1ch;
}
.element{
  display: inline-block;
  vertical-align: middle;
}

5.flex與margin

只對單個元素有效

.container{
  display:flex;
}
.element{
  margin:auto;
}

6&7 flex

.container{
  display: flex;
  justify-content: center;
  align-items: center;
}


.container{
  display: flex;
}
.element{
  align-self: center;
  margin: 0 auto;
}

8&9grid

.container{
  display: grid;
  align-items: center;
  justify-content: center;
}

.container{
  display: grid;
}
.element{
  justify-self: center;
  align-self: center
}

10.偽元素與grid

.container{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 1fr);
}
.container::before,
.container::after{
  content:"";
}

11.grid row

.container{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows: repeat(3, 1fr);
}
.element{
  grid-row: 2 / span 1; /* or grid-row: 2/3 */
}

12.grid與margin

.container{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows: repeat(3, 1fr);
}
.element{
  grid-row: 2 / span 1; /* or grid-row: 2/3 */
}

13.padding與border-box

當(dāng)容器與子元素的高度都知道的時候

.container{
  height:200px;
  box-sizing: border-box;
  padding: 50px 0;
}
.element{
  height: 100px;
}

14.height與line-height

.container{
  height:200px;
  line-height:200px
}
.element{

}