css：水平居中和垂直居中

前言

居中是样式中常用的操作，这里简单做一下总结：

下面的是基础文件样式：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent {
      width: 200px;
      height: 100px;
      position: relative;
      background-color: red;
    }

    .parent .child {
      width: 100px;
      height: 50px;
      background-color: yellow;
    }

  </style>
</head>

<body>
  <div class="parent">
    <div class="child"></div>
  </div>

</body>

</html>

 

一、水平居中

1、子元素为内联样式时（inline-block）

　　把子元素设置内联样式包括（display: inline-block | inline-flex | inline-grid | inline-table 也含有内联样式特性)，只需要设置父元素的text-align:center）

<style>
    /* 水平居中 子元素是内联元素时 */
    .parent {
      text-align: center;
    }

    .child {
      display: inline-block;
    }

  </style>

2、子元素为块级元素

父元素和子元素都是块级元素，子元素设置margin: 0 auto, 必须设置宽度即可。

<style>

    /* ============================= */
    /* 水平居中 父子元素都为块级元素 */
    .parent {}

    .child {
      width: 100px;
      margin: 0 auto;
    }

    /* ============================= */
  </style>

 

3、子元素 position:absolute

子元素设置为绝对定位，向左距离50%，transform向左平移自身的-50%

<style>
    /* ============================= */
    /* 子元素设置为绝对定位时 */
    .parent {}

    .parent .child {
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
    }

    /* ============================= */
  </style>

 

 4、父元素flex布局

<style>
    /* ============================= */
    /* 父元素设置为flex，内容设置为居中 ，子元素可以是块级也可以是内联*/
    .parent {
      display: flex;
      justify-content: center;
    }

    .parent .child {}

    /* ============================= */
  </style>

 

二、垂直居中

 1、子元素为块级和内联 (使用vertical-align注意事项)

子元素为块级block 或者内联 inline-block都可以

<style>
    /* ============================= */
    /* 父元素设置为flex，内容设置为居中 ，子元素可以是块级也可以是内联*/
    .parent {
      display: table-cell;        // 这个一定要设置
      vertical-align: middle;
    }

    .parent .child {
     
    }

    /* ============================= */
  </style>

 

 2、子元素设置绝对定位 absolute

<style>
    /* ============================= */
    /* 子元素设置绝对定位*/
    .parent {}

    .parent .child {
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
    }

    /* ============================= */
  </style>

3、父元素设置为 flex布局

子元素可以是内联也可以是块级元素

<style>
    /* ============================= */
    /* 子元素设置绝对定位*/
    .parent {
      display: flex;
      align-items: center;
    }

    .parent .child {}

    /* ============================= */
  </style>

 

三、水平且垂直居中

1、子元素是内联 inline-block

设置子元素 display : inline-block     注意子元素需要设置 width 和 height

<style>
    /* ============================= */
    /* 子元素设置绝对定位*/
    .parent {
      /* 水平居中 */
      text-align: center;
      /* 垂直居中 */
      display: table-cell;
      vertical-align: middle;
    }

    .parent .child {
      /* 子元素必须是内联 因为水平居中要使用text-align */
      display: inline-block;
    }

    /* ============================= */
  </style>

 

2、子元素绝对定位 absolute

父亲设置相对定位，孩子设置绝对定位

<style>
    /* ============================= */
    .parent {
      /* 父亲设置相对定位，孩子的绝对定位会相对父亲来移动 */
      position: relative;
    }

    .parent .child {
      /* 孩子设置绝对定位， */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }

    /* ============================= */
  </style>

 

3、父元素flex布局

浏览器支持 ie11

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

    .parent .child {

    }

    /* ============================= */
  </style>

四、单行文本垂直居中

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 50px;
      background-color: pink;
      line-height: 50px;
    }

  </style>
</head>

<body>
  <div> 文字垂直居中 </div>
</body>

</html>

 

posted @ 2020-05-15 17:51  葡萄想柠檬  Views(790)  Comments(0)  Edit  收藏  举报
目录代码