居中布局

作者: SingleDiego | 来源:发表于2020-04-19 14:29 被阅读0次

一、水平居中

1. inline-block + text-align

<body>
  <div class="parent">
    <div class="child">DEMO</div>
  </div>
  
  <style type="text/css">
    .child {
      display: inline-block;
    }

    .parent {
      text-align: center;
    }
  </style>
</body>

text-align 属性定义行内元素（例如文字）如何相对它的块父元素对齐，这里设为 center 居中。详见： text-align 属性

display 属性规定当前元素的框的类型，设为 inline-block 即为行内块元素。详见：CSS display 属性

2. table + margin

<body>
  <div class="parent">
    <div class="child">Demo</div>
  </div>
  
  <style type="text/css">
    .child {
      display: table;
      margin: 0 auto;
    }
  </style>
</body>

3. absolute + transform

<body>
  <div class="parent">
    <div class="child">Demo</div>
  </div>
  
  <style type="text/css">
    .child {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    .parent {
      position: relative;
    }
  </style>
</body>

4. flex + justify-content

<body>
  <div class="parent">
    <div class="child">Demo</div>
  </div>
  
  <style type="text/css">
    .parent {
      display: flex;
      justify-content: center;
    }
  </style>
</body>

或者使用 margin：

<body>
  <div class="parent">
    <div class="child">Demo</div>
  </div>
  
  <style type="text/css">
    .child {
      margin: 0 auto;
    }

    .parent {
      display: flex;
    }
  </style>
</body>

二、垂直居中

1. table-cell + vertical-align

<body>
  <div class="parent">
    <div class="child">Demo</div>
  </div>
  
  <style type="text/css">
    .parent {
      display: table-cell;
      vertical-align: middle;
    }
  </style>
</body>

2. absolute + transform

<body>
  <div class="parent">
    <div class="child">Demo</div>
  </div>
  
  <style type="text/css">
    .child {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    .parent {
      position: relative;
    }
  </style>
</body>

3. flex + align-items

<body>
  <div class="parent">
    <div class="child">Demo</div>
  </div>
  
  <style type="text/css">
    .parent {
      display: flex;
      align-items: center;
    }
  </style>
</body>

三、水平垂直同时居中

1. inline-block + text-align + table-cel + vertical-align

<body>
  <div class="parent">
    <div class="child">Demo</div>
  </div>
  
  <style type="text/css">
    .child {
      display: inline-block;
    }

    .parent {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
  </style>
</body>

2. absolute + translate

<body>
    <div class="parent">
        <div class="child">Demo</div>
  </div>
  
  <style type="text/css">
    .child {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .parent {
      position: relative;
    }
  </style>
</body>

3. flex+ justify-content + align-items

<body>
  <div class="parent">
    <div class="child">Demo</div>
  </div>
  
  <style type="text/css">
    .parent {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</body>

网友评论

本文标题：居中布局

本文链接：https://www.haomeiwen.com/subject/tawevhtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！