css 水平垂直居中

css 水平垂直居中

页面应用：

<div class='header'>
  <div class='bar' style='red'>0101</div>
</div>

一 . absolute + transform（不需要固定子元素的宽高）

absolute:相对于最近定位元素来定位；

transform:使元素可以旋转(rotate)，缩放(scale)，移动(translate)，倾斜(skew)等

.header {
  border: 1px solid red;
  width: 300px;
  height: 300px;
  position: relative;
}
.bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: green;
}

二 . line-height + display:inline-block（不需要固定子元素的宽高）

行高： line-height：高度一样

.header {
  border: 1px solid red;
  width: 300px;
  height: 300px;
  line-height: 300px;
  text-align: center;
}

.bar {
  display: inline-block;
  line-height: initial;
  vertical-align: middle;
  background: green;
}

三 . css-table（不需要固定子元素的宽高）

.header {
  border: 1px solid red;
  width: 300px;
  height: 300px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.bar {
  display: inline-block;
  background: green;
}

四 . flex（不需要固定子元素的宽高）

flex:弹性布局

容器属性：

​ 决定主轴方向： flex-direction:向上row | 向下row-reveres | 向右column | 向左column-reveres

​ 排列不下样式： flex-wrap:不换行nowrap | 换行第一行在上面wrap | 换行第一行在下面warp-reverse

​ 主轴对其方式： justify-content:左对齐flex-start | 右对齐flex-end | 居中center | 两端对齐space-between | 间隔相等space-around

​ 交叉轴对齐方式： 起点对齐flex-start | 终点对齐flex-end | 中间对齐center | 基线对齐baseline | 默认stretch

​ 多轴对齐：align-content: flex-start | flex-end | center | space-between | space-around | stretch;

项目属性：

​ 排列顺序：order: <数字> 默认0

​ 放大比例： flex-grow :<数字> 默认 0

​ 缩小比例： flex-shrink: <数字> 默认0

​ 分配多余空间之前： flex-basis :<数字> 默认 auto

​ flex 是flex-grow, flex-shrink 和 flex-basis的简写: flex: none | <数字>

​ 允许单个项目有与其他项目不一样的对齐方式：align-self: auto | flex-start | flex-end | center | baseline | stretch;

.header {
  border: 1px solid red;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bar {
  background: green;
}

五 . absolute + margin:auto（--需要固定子元素的宽高）

.header {
  border: 1px solid red;
  width: 300px;
  height: 300px;
  position: relative;
}

.bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  background: green;
}