彻底搞懂多种方式实现垂直水平居中布局

最新推荐文章于 2024-04-25 14:44:36 发布

looper.zhuo

最新推荐文章于 2024-04-25 14:44:36 发布

阅读量220

点赞数

分类专栏： HTML 文章标签： css html css3 flex 定位

本文链接：https://blog.csdn.net/qq_40677590/article/details/108378333

版权

HTML 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

起源

今天看了一篇文章，面试官面试一个有三年经验的面试者，其中一个问题就是：有哪些方式可以实现垂直水平居中的方式？

结果面试者就是知道有一个flex布局，支支吾吾也没有说清楚。所以我准备整理一下常用的居中方式：

使用absolute绝对定位实现

效果：

1.使用absolute盒子没有指定宽度和高度,再配合css3里的transform属性实现

//代码
<body >
    <div>
      <h2>我是一个垂直水平居中的元素</h2>
      <br/>
      <br/>
    </div>
</body>

//样式
 div{
    left: 50%;
    top:50%;
    position: absolute;
    background: cadetblue;
    transform: translate(-50%, -50%);
  }

2.使用absolute盒子指定宽度和高度，再配合margin-top和margin-left来实现

//代码
<body >
    <div>
      <h2>我是一个垂直水平居中的元素</h2>
      <br/>
      <br/>
    </div>
</body>

//样式
div{
  width: 400px;
  height: 200px;
    left: 50%;
    top:50%;
    position: absolute;
    background: cadetblue;
    margin-top: -100px;
    margin-left: -200px;
  }

3.使用absolute盒子指定宽度和高度，再配合margin为auto来实现

//代码
<body >
    <div>
      <h2>我是一个垂直水平居中的元素</h2>
      <br/>
      <br/>
    </div>
</body>

//样式
   div{
    width: 400px;
    height: 200px;
    background: cadetblue;
    position:absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

使用flex弹性盒子来实现

注意：由于是使用弹性盒子，一般我们会给父布局设置宽度和高度，如果不设置高度，父布局高度和子布局高度一样，就看不出效果，用时使用flex要注意弹性盒子在浏览器的兼容

//代码
  <div class="div">
    <div>
      <h2>我是一个垂直水平居中的元素</h2>
      <br />
      <br />
    </div>
  </div>

//样式
 .div {
    height: 600px;
    width: 100%;
    display: -webkit-flex;
    display: flex;
    background: rgb(14, 236, 106);
  }

  div {
    background: cadetblue;
    width: 400px;
    height: 200px;
    margin: auto;
  }

效果：

looper.zhuo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
彻底搞懂多种方式实现垂直水平居中布局

起源今天看了一篇文章，面试官面试一个有三年经验的面试者，其中一个问题就是：有哪些方式可以实现垂直水平居中的方式？结果面试者就是知道有一个flex布局，支支吾吾也没有说清楚。所以我准备整理一下常用的居中方式：使用absolute绝对定位实现效果：1.使用absolute盒子没有指定宽度和高度,再配合css3里的transform属性实现//代码<body > <div> <h2>我是一个垂直水平居中的元素&l...
复制链接

扫一扫