居中布局

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

居中布局
布局
页面布局的几种方式
CSS布局与水平垂直居中
页面架构
CSS边用边学（一）：一站式各种布局实践
无标题文章
CSS水平居中布局、垂直居中布局、垂直水平居中布局
CSS常用居中方法
[2020-08-10]css3中的常用几种布局

一、水平居中

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>