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;
}

你可能感兴趣的:(css居中方式)