垂直居中的方法

总结垂直居中的方法

<div class="layout-wrapper">
    <div class="box1">
        <h4>垂直居中方法</h4>
    </div>
  </div>

.layout-wrapper{
   width:300px;
	height:300px;
    border: 1px solid red;
}
.box1{
    height:150px;
	width:150px;
    border:1px solid blue;
}

方法1：display：flex

.layout-wrapper{
   width:300px;
	height:300px;
    border: 1px solid red;
    display:flex;
    align-items:center;
}
.box1{
    height:150px;
	width:150px;
    border:1px solid blue;
    display:flex;
    align-items:center;
}

 方法2：margin，transform配合

.layout-wrapper {
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.box1 {
  height: 150px;
  width: 150px;
  border: 1px solid blue;
  margin: 50% auto;
  transform: translateY(-50%);
// 这句话的意思就是向上平移自身元素的百分之50
}

方法3：父标签的相对定位+子标签的绝对定位absolute+其他

.layout-wrapper {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  position: relative;
}
.box1 {
  height: 150px;
  width: 150px;
  border: 1px solid blue;
  position: absolute;
  left: 50%;
  top: 50%;
  /*宽高的各一半*/
  margin-left: -75px;
  margin-top: -75px;
}

//第二种方法：当宽度和高度未知时使用absolute+margin:auto，
.layout-wrapper {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  position: relative;
}
.box1 {
  height: 150px;
  width: 150px;
  border: 1px solid blue;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

//第三种方法absolute+transform
.layout-wrapper {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  position: relative;
}
.box1 {
  height: 150px;
  width: 150px;
  border: 1px solid blue;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

方法4：采用table-cell，dispaly:table-cell；会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果。

.layout-wrapper {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.box1 {
  height: 150px;
  width: 150px;
  border: 1px solid blue;
  display: inline-block;
//   如果没有行内块元素设置，div不会水平居中只会垂直居中
// text-align: center应用场景：
// 父盒子设置text-align: center后，盒子里面的文字内容、行内元素、行内块元素、 都可以水平居中对齐；
// 而块级元素一般是不可以水平居中的。

// 因此，块级元素想要水平居中，由两种方法：
// 一：块级元素没有设置宽高，且父盒子设置了text-align: center;
// 二：块级元素设置margin:0 auto;即可
}

方法五：inline-block+vertical-aligin

.layout-wrapper {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  text-align: center;
  line-height: 300px;
}
.box1 {
  height: 150px;
  width: 150px;
  line-height: 100px;//如果不设置就会继承父元素的行高
  border: 1px solid blue;
  display: inline-block;
  vertical-align: middle;

//   vertical-align属性只对行内元素有效，对块内元素无效！
// 如果仅仅设置display为inline-block;，vertical-align也是无效的
// 那是因为将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内！
// 说的通俗点，就是你设置的当前div属性还是块对象呈递，但是允许同一级别的div在同一行内，也可以设置宽度和高度！

// // 解决办法：
// 1.将display属性设置为table-cell，将块元素转化为单元格，然后加上vertical-align：middle

// 2.设置行高即line-height，但是要注意，需要设置父元素的行高，要与div的高度一致！否则也会有偏差的

}

方法六：强大的grid

.layout-wrapper {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  display: grid;
}
.box1 {
  height: 150px;
  width: 150px;
  border: 1px solid blue;
  align-self: center;
  justify-self: center;
}

//关于grid还没有很了解，这里只做记录