锐客网

  1. 首页 > it技术 > >

CSS 垂直居中的方式

css

垂直居中 自己整理一下收集到的垂直居中的方式：

  1. table自带居中功能
    表格垂直居中

    假的表格垂直居中

    .like-table{ display:table-cell; }

  2. 设定行高
    适用于「单行」的「行内元素」 ( inline、inline-block )，将line-height设成和高度一样的数值，则内容的行内元素就会被垂直置中。
  3. 设定伪类元素
    使用伪元素的方式。
    在此之前，先解释一下 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。
    这个属性是加在容器内部较高的元素上, 使其基线相对保持在较高元素中间,
    因此，如果有一个方块变成了高度100%，那么其他的方块就会真正的垂直居中。所以使用伪类的方式，
    一串文字.parent{ text-align: center; }.child{ border: 3px solid black; display: inline-block; width: 300px; vertical-align: middle; }.parent:before{ content:''; outline: 3px solid red; display: inline-block; height: 100%; vertical-align: middle; } .parent:after{ content:''; outline: 3px solid red; display: inline-block; height: 100%; vertical-align: middle; }

  4. margin: auto
    一串文字.parent{ height: 600px; position: relative; } .child{ position: absolute; width: 300px; height: 200px; margin: auto; top: 0; bottom: 0; left: 0; right: 0; }

  5. margin-top:-50%
    一串文字.parent{ height: 600px; position: relative; } .child{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

  6. transform
    .parent{ height: 600px; border: 1px solid red; position: relative; } .child{ border: 1px solid green; width: 300px; position: absolute; top: 50%; left: 50%; margin-left: -150px; height: 100px; margin-top: -50px; }

  7. flex布局
    .parent{ display: flex; justify-content: center; align-items: center; }

  8. 【CSS 垂直居中的方式】grid布局
    .parent{ display:grid; justify-content:center; align-content:center; }

    推荐阅读


    上一篇：7招！实现安全高效的流水线管理

    下一篇：MS Project右侧横道图展示【开始时间】的设置