css居中

首先定义俩个盒子

<div class="parent">
  <div class="child">小盒子</div>
</div>
.parent{
        width: 300px;
        height: 300px;
        background: rgb(54, 54, 102);
    }
    .child{
        width: 100px;
        height: 100px;
        background: yellow;
    }

效果图如下：

1.水平垂直居中

1. 文字小盒子实现居中

.parnet {text-align: center;}

2.、flex实现

.parent{display:flex; justify-content:center;}

3.margin实现

 .child{margin: 0 auto;}

4.定位实现

.parent{ position: relative; }
.child{ position:absolute; left: 50%; transform: translateX(-50%) }

2.垂直居中

1.###  position + transform实现

.parent{position: relative;}
.child{ position:absolute; left: 50%; top:50%; transform: translate3d(-50%, -50%, 0); }

2.margin实现

.parent{position: relative;}
.child{ position: absolute;top: 0;left: 50%;bottom: 0;right: 0;margin: auto 0;transform:translateX(-50%);}

3.flex实现

.parent {disply:flex;justify-content:center; align-items:center}

4.table-cell+ vertical实现

     .child{margin: 0 auto;}
     .parent {
        display: table-cell;
        vertical-align: middle;
     }

效果图：

flex布局

flex伸缩布局的原理

      通过给父盒子添加flex属性，达到控制子盒子位置和排列方式的目的；所以我们将flex的布局属性分为两部分：父项常见属性和子项常见属性；大部分属性在父盒子上设置达到控制子盒子的目的，但部分属性也需要在子盒子上设置。
父组件常用属性：

• flex-direction: row/column 设置主轴的方向
• justify-content: felx-start/flex-end/center/space-around/space-between;设置主轴上的子元素排列方式（设置主轴居中）
• flex-wrap: wrap/nowrap 设置子元素时候换行
• align-content:flex-start/flex-end/center/space-around/space-between; 设置侧轴上的子元素排列方式（多行 出现换行）
• align-items: flex-start/flex-end/center/stretch 设置侧轴上的子元素排列方式（单行使用）（设置侧轴居中）

子项目常见的属性：

• flex-grow: 0; 放大

• flex-shrink: 1; 缩小

• flex-basis: auto; 子元素占主轴的空间大小

• flex: 1; 子项目占的份数，分配剩余空间 是上述三个的缩写

• align-self:auto; //默认继承父级的align-items

• order;属性定义子项的排列顺序（前后顺序）