跳到主要内容

行内块元素水平垂直居中的方法

方法一：使用line-height​

示例：

  <style>
    div {
      width: 500px;
      height: 300px;
      border: 1px solid red;
      text-align: center;
      line-height: 300px;
    }

    img {
      vertical-align: middle;
    }
  </style>
</head>

<body>
  <div>
    <img src="1.png" alt="">
  </div>

</body>

方法二：使用 table​

示例：

  <style>
    div {
      width: 500px;
      height: 300px;
      border: 1px solid red;
      text-align: center;
      display: table; /*水平方向居中*/
    }

    span {
      display: table-cell; /*垂直方法居中*/
      vertical-align: middle;
    }
  </style>
</head>

<body>
  <div>
    <span>
      <img src="1.png" alt="">
    </span>
  </div>

</body>

注意：行内块元素的外面需要包两层。一层为 display:table；一层为 display:table-cell;

span 设置了 display:table-cell 就相当于一个单元格，只有一个单元格的话，就自动水平居中了，之后设置vertical-align: middle;为每个单元格居中。