16、实现水平垂直的三种方法(flex、grid、transform)

简介: 16、实现水平垂直的三种方法(flex、grid、transform)
  • 1、flex布局:justify-content水平居中,align-items垂直居中
  • 2、grid布局:justify-content水平居中,align-items垂直居中
  • 3、relative+absolute+top+left+transform


646a9737332f488b88d826b79af4822b.png

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  body {
    display: flex;
    /* 水平方向:两端对齐,间隔相等 */
    justify-content: space-around;
  }
  .case1,
  .case2,
  .case3 {
    height: 300px;
    width: 300px;
    border: 1px solid black;
  }
  /* 1、flex布局 */
  .case1 {
    display: flex;
    /* 水平居中 */
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
  }
  /* 2、grid布局 */
  .case2 {
    display: grid;
    /* 水平居中 */
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
  }
  /* 3、absolute、transform */
  .case3 {
    position: relative;
  }
  .case3 .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>
<body>
  <!-- 1、flex布局 -->
  <div class="case1">
    <div>
      <h1>flex布局居中</h1>
      <ul>
        <li>兼容IE9以上</li>
        <li>适合一行一列</li>
      </ul>
    </div>
  </div>
  <!-- 2、grid布局 -->
  <div class="case2">
    <div>
      <h1>grid布局居中</h1>
      <ul>
        <li>兼容IE9以上</li>
        <li>适合多行多列</li>
      </ul>
    </div>
  </div>
  <!-- 3、absolute、transform -->
  <div class="case3">
    <div class="child">
      <h1>absolute、transform</h1>
      <ul>
        <li>相对定位、绝对定位</li>
        <li>子元素top、left、translate</li>
      </ul>
    </div>
  </div>
</body>
</html>


相关文章
|
7月前
【冷门骚操作】利用display:table-cell实现div水平、垂直居中
【冷门骚操作】利用display:table-cell实现div水平、垂直居中
|
容器
Grid网格布局
Grid网格布局
|
5月前
|
前端开发 容器
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
34 3
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
|
5月前
|
前端开发 开发者 SEO
|
5月前
|
容器
Flex 布局和 Grid 布局的区别
Flex 布局和 Grid 布局的区别
105 0
|
7月前
|
前端开发 开发者 容器
flex和grid布局
flex和grid布局
|
7月前
|
开发者
【干货分享】Grid 布局和 Flex 布局
【干货分享】Grid 布局和 Flex 布局
143 0
|
7月前
|
前端开发 容器
CSS布局模式之Flex布局&Grid布局(三)
CSS布局模式之Flex布局&Grid布局
|
7月前
|
前端开发 开发者 容器
CSS布局模式之Flex布局&Grid布局(二)
CSS布局模式之Flex布局&Grid布局
|
7月前
|
前端开发 开发者 UED
CSS布局模式之Flex布局&Grid布局(一)
CSS布局模式之Flex布局&Grid布局