css居中方式

元素类型

行内元素

• 不自动换行，除非占满一行时

• 宽高由内容决定，不可手动设置

• margin,padding只左右有效

• a、span、em、b、strong、i

块元素

• 块元素独占一行

• 可设置宽高，如不设置宽占父容器的100%

• margin，padding有效

• float浮动元素会变成块级元素

• div、p、ul、li、h1~h6、dl、dt、dd

行内块元素

• 支持全部样式
• 如果不设置宽高，就由内容决定
• 不换行
• 代码换行，盒子会产生间距

flex布局

• 将父容器display:flex 或者 display:inline-flex
• flex-direction属性有四个值设置元素按横轴线还是竖轴线排序
  • row 从左到右
  • row-reverse 从右到左
  • column从上到下
  • column-reverse从下到上
• flex-wrap是否换行
  • nowarp不换行 默认值
  • wrap无法容纳时换行
  • wrap-reverse换行，但是每行的顺序与wrap的顺序相反
• justify-content控制在横轴线上的布局
  • justify-content:flex-start在主轴线开始处排序，默认属性
  • justify-content:flex-end在主轴线结束处排序
  • justify-content:center在主轴线处居中
  • justify-content:space-between除最后一个和第一个元素其他元素间隔相同
  • justify-content:space-around让每个flex有相同的空间
• align-items控制在竖轴线上的布局
  • align-items:stretch让flex项目和flex容器同高度，默认属性
  • align-items:flex-start在竖轴线开始处排序
  • align-items:flex-end在竖轴线结束处排序
  • align-items:center在竖轴线处居中
  • align-items:baseline让flex项目沿着基线对齐
• flex-grow:默认0，1使元素填充容器
• flex-shrink:默认1，使元素自动收缩
• flex-basis：设置元素的固定宽度不受flex-shrink影响
• align-self:改变单独一个flex项目的侧轴位置
  • 与align-items一样
  • auto继承align-items

水平居中

#parent{text-align:center}

这种居中方法只对文字,行内元素，行内块元素有效，且会被行内元素继承

#son{
    width: 100px; /*必须定宽*/
    margin: 0 auto;
}

auto让左右两边自动分配，但是就必须要设定宽度，且只作用域块级元素

#son{
    width: 100px; /*必须定宽*/
    margin: 0 auto;
}

使用flex布局

垂直居中

#parent{
    height: 150px;
    line-height: 150px;  /*与height=line-height等值*/
}

只能用于单行行内容

#parent{
    display: flex;
    align-items: center;
}

flex布局

水平垂直居中

#parent{
    height: 150px;
    line-height: 150px;  /*行高的值与height相等*/
    text-align: center;
    font-size: 0;   /*消除幽灵空白节点的bug*/
}
#son{
    /*display: inline-block;*/  /*如果是块级元素需改为行内或行内块级才生效*/
    vertical-align: middle;
}

只对行内元素有效

button#parent{ 
    height: 150px;
    width: 200px;
    outline: none;  
    border: none;
}
#son{
    display: inline-block; 
}

内部子元素要改成行内元素

#parent{
    display: flex;
    justify-content: center;
    align-items: center;
}