几种常用的垂直、水平居中办法

最新推荐文章于 2022-04-25 15:04:19 发布

啊a阿花

最新推荐文章于 2022-04-25 15:04:19 发布

阅读量3.3k

点赞数 6

分类专栏： css 文章标签： css css3 javascript html html5

本文为博主原创文章，未经博主允许禁止转载，转载请注明出处！

本文链接：https://blog.csdn.net/aaahuahua/article/details/123164246

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css居中方法

一、行内元素

text-align + line-height

设置行内元素（包括文本，图片等）水平居中可以通过设置父元素的text-align属性
垂直居中可以通过设置父元素行高的方式。将其父元素的line-height设成和高度一样的数值，被包裹的行内元素或者已经设置为inline-block的块级元素就会垂直居中。

    .text{
        width: 200px; 
        height: 200px;
        background-color: aqua;
        text-align: center;
        line-height: 200px
    }
    <div class="text">
        <span>
            垂直水平居中
        </span>
    </div>

在这里插入图片描述

注：只适用于单行的行内元素

二、块级元素

1、父元素设置 padding值 + 子元素margin ：auto

  .warp{
      width: 200px; 
      height: 200px;
      background-color: aqua;
      box-sizing:border-box;
	  padding-top: 75px;

  }
  .center{
      background-color: red;
      width: 50px;
      height: 50px;
      margin: auto;
  }
  <div class="warp">
      <div class="center">

      </div>
  </div>

在这里插入图片描述

添加box-sizing:border-box属性后padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里，不然元素的实际宽高 = padding值 + border值 + 元素宽高

2、position + transform

父元素设置绝对定位，子元素设置相对定位，然后再给子元素设置一个translate值即可实现水平垂直居中

    .warp{
        width: 200px; 
        height: 200px;
        background-color: aqua;
        position: relative;
    }
    .center{
        background-color: red;
        width: 50px;
        height: 50px;
        position:absolute;
        left:50%;  
        top:50%;
        transform: translate(-50%,-50%); 
    }

</style>
<body>

    <div class="warp">
        <div class="center">

        </div>
    </div>

需要子元素设置translate是因为position定位是以左上角为基准的，而不是元素中心点，设置translate让子元素移动自身大小的一半才能实现水平垂直居中

在这里插入图片描述

3、table布局

display:table-cell属性的作用是让标签元素以表格单元格的形式呈现，类似于td标签，vertical:middle设置元素垂直居中，text-align:center设置水平居中

    .wrap{
        width: 200px;
        height: 200px;
        background: aqua;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .center{
        display: inline-block; // 如果是内联元素则不需要设置
        width: 50px;
        height: 50px;
        background: red;
    }
    
    <div class="wrap">
        <div class="center">

        </div>
    </div>

很明显可以看出来通过table布局的局限就是只适用于行内元素或者行内块级元素

4、flex布局

flexbox有两条轴线，一条主轴一条侧轴。设置父元素为flex容器，然后设置主轴和交叉轴的对齐方式即可

    .wrap{
        width: 200px;
        height: 200px;
        background: aqua;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .center{
        display: inline-block;
        width: 50px;
        height: 50px;
        background: red;
    }

    <div class="wrap">
        <div class="center">

        </div>
    </div>

如果是行内元素可以通过display:inline-flex将其设置为flex容器

5、grid布局

CSS 网格布局将一个页面划分为几个主要区域，同时定义这些区域的大小、位置、层次等关系，在grid容器里面的水平区域称为行（row），垂直区域称为列（column），行与列的交叉称为单元格。

设置父元素为grid容器，然后设置单元格内容的水平垂直位置即可实现水平垂直居中（因为没有设置行和列所以整个wrap元素为一个单元格）

    .wrap{
        width: 200px;
        height: 200px;
        background: aqua;
        display: grid;  // 设置grid容器
        justify-items:center;
        align-items: center ;

    }
    .center{
        display: inline-block;
        width: 50px;
        height: 50px;
        background: red;

    }

    <div class="wrap">
        <div class="center">

        </div>
    </div>