css响应式布局汇总(一)——居中布局

最新推荐文章于 2024-09-07 22:06:06 发布

大战黄牛肉

最新推荐文章于 2024-09-07 22:06:06 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： css笔记文章标签： css弹性布局居中布局水平居中垂直居中

本文链接：https://blog.youkuaiyun.com/weixin_40912288/article/details/80809643

css笔记专栏收录该内容

1 篇文章

订阅专栏

一、居中布局的实现(父元素和子元素不定宽高)

1、水平居中布局的解决方案

1）inline-block + text-align

    <style>
      .container {
        text-align: center;
      }
      .cell {
        display: inline-block;
      }
    </style>


    <div class="container">
      <div class="cell"></div>
    </div>

2)table + margin

    <style>
      .cell {
        display: table;
        margin:0 auto;
      }
    </style>


    <div class="container">
      <div class="cell"></div>
    </div>

3）absloute + transform

    <style>
      .container{
        position:relative;
      }
      .cell {
        position:absolute;
        left:50%;
        transform:translateX(-50%);
      }
    </style>


    <div class="container">
      <div class="cell"></div>
    </div>

4）flex + justify-content

    <style>
      .container{
        display:flex;
        justify-content: center;
      }
    </style>


    <div class="container">
      <div class="cell"></div>
    </div>

5)flex + margin

    <style>
      .container{
        display: flex;
      }
      .cell{
        margin:0 auto;
      }
    </style>


    <div class="container">
      <div class="cell"></div>
    </div>

2、垂直居中布局的解决方案

1)table-cell + vertical-align

    <style>
      .container{
        display:table-cell;
        verticl-align:miidle
      }
    </style>


    <div class="container">
      <div class="cell"></div>
    </div>

2)absolute+transform

    <style>
      .container{
        position:relative;
      }
      .cell {
        position:absolute;
        top:50%;
        transform:translateY(-50%);
      }
    </style>


    <div class="container">
      <div class="cell"></div>
    </div>

3)flex+align-items

    <style>
      .container{
        display:flex;
        align-items: center;
      }
    </style>


    <div class="container">
      <div class="cell"></div>
    </div>

3、居中布局的解决方案

1)inline-block + text-align + table-cell+vertical-align

    <style>
      .container {
        display:table-cell
        text-align: center;
      }
      .cell {
        display: inline-block;
        vertical-align:middle;
      }
    </style>


    <div class="container">
      <div class="cell"></div>
    </div>

2)absolute + transform

    <style>
      .container{
        position:relative;
      }
      .cell {
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
      }
    </style>


    <div class="container">
      <div class="cell"></div>
    </div>

3)flex + justify-content +align-items

    <style>
      .container{
        display:flex;
        align-items: center;
        justify-content:center;
      }
    </style>


    <div class="container">
      <div class="cell"></div>
    </div>