css居中方法

  • 一、行内元素
  • text-align + line-height
  • 二、块级元素
  • 1、父元素设置 padding值 + 子元素margin ：auto
  • 2、position + transform
  • 3、table布局
  • 4、flex布局
  • 5、grid布局


一、行内元素

text-align + line-height

  1. 设置行内元素（包括文本，图片等）水平居中可以通过设置父元素的text-align属性
  2. 垂直居中可以通过设置父元素行高的方式。将其父元素的line-height设成和高度一样的数值，被包裹的行内元素或者已经设置为inline-block的块级元素就会垂直居中。
.text{
        width: 200px; 
        height: 200px;
        background-color: aqua;
        text-align: center;
        line-height: 200px
    }
    <div class="text">
        <span>
            垂直水平居中
        </span>
    </div>

android 水平垂直居中_android 水平垂直居中

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

二、块级元素

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>

android 水平垂直居中_html_02

添加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让子元素移动自身大小的一半才能实现水平垂直居中

android 水平垂直居中_css_03

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>

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

android 水平垂直居中_android 水平垂直居中_04