【CSS】8种常见的CSS水平和垂直都居中的方法

最新推荐文章于 2023-09-30 13:11:25 发布

向着光芒的女孩

最新推荐文章于 2023-09-30 13:11:25 发布

阅读量471

点赞数

分类专栏： CSS 文章标签： css 垂直水平居中布局

本文链接：https://blog.csdn.net/ann295258232/article/details/104838236

版权

CSS 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

在这里插入图片描述

1.比较传统的方式 absolute+margin负值偏移

特点：父容器要设置宽高，需要知道子容器宽高，偏移量是子容器宽高的一半且是负值，兼容性好

  /* absolute+margin负值偏移布局 */

  .layout.absolute {
      position: relative;
  }

  .layout.absolute  article {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -160px;
  }
        
   <section class="layout absolute">
       <article>
           <p>
               1.absolute+margin负值偏移<br>
               （父容器要设置宽高，需要知道子容器宽高）
           </p>
       </article>
   </section>

2.absolute+transform布局

特点：父容器要设置宽高


  /* absolute+transform布局 */
  .layout.transform {
      position: relative;
  }

  .layout.transform article {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
  }

   <section class="layout transform">
       <article>
           <p>2.absolute+transform<br>
           （父容器要设置宽高）
           </p>
       </article>
   </section>

3.flex布局

特点：自适应

  /* flex布局 */
  .layout.flex {
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  <section class="layout flex">
      <article>
          <p>3.flex<br>（自适应）</p>
      </article>
  </section>

4.table-cell布局

特点：比其他方法多1个容器，注意边距重叠

  .layout.table-cell {
      display: table;
      width: 100%;
  }

  .layout.table-cell .outer {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
  }

  .layout.table-cell article {
      margin: 0 auto;
      overflow: auto;
  }
  
  <section class="layout table-cell">
      <div class="outer">
          <article>
              <p>
                  4.table-cell<br>（多1个容器，注意边距重叠）
              </p>
          </article>                      
      </div>
  </section>

5.grid布局

特点：自适应,要考虑兼容性

   .layout.grid{
       display: grid;
   }

   .layout.grid article {
       justify-self: center;
       align-self: center;
   }

   <section class="layout grid">
       <article>
           <p>5.grid<br>（自适应,要考虑兼容性）</p>
       </article>
   </section>

6.inline-block布局

特点：自适应，兼容性好

   .layout.inline-block {
       text-align: center;
   }

   .layout.inline-block::after {
       content: '';
       height: 100%;
       display: inline-block;
       vertical-align: middle;
   }

   .layout.inline-block article {
       display: inline-block;
       vertical-align: middle;
   }
        
    <section class="layout inline-block">
        <article>
            <p>6.inline-block<br>（自适应）</p>
        </article>
    </section>

7.absolute + margin-auto 布局

特点：内外容器都要设置宽高，兼容性好

  .layout.margin-auto {
      position: relative;
  }

  .layout.margin-auto article{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
  }
        
   <section class="layout margin-auto">
       <article>
           <p>7.absolute + margin-auto<br>(内外容器都要设置宽高) </p>
       </article>
   </section>

8.line-height 布局

特点：只适合单行inline，而且要知道父容器的高度，兼容性好

 .layout.line-height {
     line-height: 150px;
 }

 .layout.line-height article {
     display: inline;
     margin:  auto;
 }
  <section class="layout line-height">
      <article>
          <p>8.line-height(只适合单行inline，而且要知道父容器的高度)</p>
      </article>
  </section>

完整例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中</title>
    <style>
        html,body {
            padding: 0;
            margin: 0;
        }
        .layout {
            margin-bottom: 15px;
            height: 150px;
            background-color: blueviolet;
            background-clip: content-box;
        }

        .layout article {
            background-color: lightcoral;
            color: #fff;
            width: 320px;
            height: 100px;  
            text-align: center;
        }

        /* absolute+margin负值偏移布局 */

        .layout.absolute {
            position: relative;
        }

        .layout.absolute  article {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -160px;
        }

        /* absolute+transform布局 */
        .layout.transform {
            position: relative;
        }

        .layout.transform article {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

        /* flex布局 */
        .layout.flex {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* table-cell布局 */
        .layout.table-cell {
            display: table;
            width: 100%;
        }

        .layout.table-cell .outer {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

        .layout.table-cell article {
            margin: 0 auto;
            overflow: auto;
        }

        /* grid布局 */
        .layout.grid{
            display: grid;
        }

        .layout.grid article {
            justify-self: center;
            align-self: center;
        }

        /* inline-block布局 */
        .layout.inline-block {
            text-align: center;
        }

        .layout.inline-block::after {
            content: '';
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }

        .layout.inline-block article {
            display: inline-block;
            vertical-align: middle;
        }


        /* absolute + margin-auto */
        .layout.margin-auto {
            position: relative;
        }

        .layout.margin-auto article{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

        /* line-height 布局 */
        .layout.line-height {
            line-height: 150px;
        }

        .layout.line-height article {
            display: inline;
            margin:  auto;
        }

    </style>
</head>
<body>
    <section class="layout absolute">
        <article>
            <p>
                1.absolute+margin负值偏移<br>
                （父容器要设置宽高，需要知道子容器宽高）
            </p>
        </article>
    </section>

    <section class="layout transform">
        <article>
            <p>2.absolute+transform<br>
                （父容器要设置宽高）
            </p>
        </article>
    </section>

    <section class="layout flex">
        <article>
            <p>3.flex<br>（自适应）</p>
        </article>
    </section>

    <section class="layout table-cell">
        <div class="outer">
            <article>
                <p>
                    4.table-cell<br>（多1个容器，注意边距重叠）
                </p>
            </article>
        </div>
    </section>

    <section class="layout grid">
        <article>
            <p>5.grid<br>（自适应,要考虑兼容性）</p>
        </article>
    </section>

    <section class="layout inline-block">
        <article>
            <p>6.inline-block<br>（自适应）</p>
        </article>
    </section>

    <section class="layout margin-auto">
        <article>
            <p>7.absolute + margin-auto<br>(内外容器都要设置宽高) </p>
        </article>
    </section>

    <section class="layout line-height">
        <article>
            <p>8.line-height(只适合单行inline，而且要知道父容器的高度)</p>
        </article>
    </section>

</body>
</html>

在线预览

CSS | 8 methods for horizontal and vertical centering
在这里插入图片描述

向着光芒的女孩

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【CSS】8种常见的CSS水平和垂直都居中的方法

1.比较传统的方式 absolute+margin负值偏移 /* absolute+margin负值偏移布局 */ .layout.absolute { position: relative; } .layout.absolute article { position: absolute; top: 50%; left: 50%...
复制链接

扫一扫

专栏目录