元素实现在父元素中实现垂直水平居中的几种方式

最新推荐文章于 2023-03-28 19:21:32 发布

DanceDonkey

最新推荐文章于 2023-03-28 19:21:32 发布

阅读量1k

点赞数 1

分类专栏：前端文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_43750656/article/details/121940089

版权

前端专栏收录该内容

44 篇文章 2 订阅

订阅专栏

方式一：

使用绝对定位的方式，将绝对定位的元素top，bottom，right，left都设置为0，然后margin值设置为auto。此时margin的值浏览器就会自动计算，以使得满足定位的包含块的宽度和高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  #out{
    width: 200px;
    height: 200px;
    background-color: yellow;
    margin: 100px auto;
    position: relative;
  }

  #inner{
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

</style>
<body>

  <div id="out">
    <div id="inner">
    </div>
  </div>

</body>
</html>

方式二：

元素绝对定位以后，top设置50%，left设置50%，然后margin-left设置元素自身宽度的 -50%，margin-top设置元素自身高度的-50%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  #out{
    width: 300px;
    height: 500px;
    background-color: yellow;
    margin: 100px auto;
    position: relative;
  }

  #inner{
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    margin-left: -25px;
    margin-top: -25px;
    /*此时的50%是包含块高度的50%*/
    top: 50%;
    /*此处的50%是包含块宽度的50%*/
    left: 50%;
  }

</style>
<body>

  <div id="out">
    <div id="inner">
    </div>
  </div>

</body>
</html>

这里要注意的是百分比是相对于哪个元素的哪个属性的百分比

方式三：假设不知道元素的宽高？如何实现垂直水平居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  #out{
    width: 300px;
    height: 500px;
    background-color: pink;
    margin: 100px auto;
    position: relative;
  }

  #inner{
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: green;
    transform: translateX(-50%) translateY(-50%);
  }
</style>
<body>

  <div id="out">
    <div id="inner">
      测试文字内容撑开
      <p>1</p>
      <p>1</p>
      <p>1</p>
      <p>1</p>
    </div>
  </div>

</body>
</html>

借助 transform: translateX(-50%) translateY(-50%);，可以轻松实现不确定宽高的元素实现垂直水平居中，值得注意的是，这里的top50%是相对于包含块的高度计算的，left50%相对于包含块的宽度计算，而 translateX(-50%)是相对于元素自身宽度计算的， translateY(-50%)是相对于元素自身高度计算的，translate 可以实现自动计算。

DanceDonkey

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素实现在父元素中实现垂直水平居中的几种方式

方式一：使用绝对定位的方式，将绝对定位的元素top，bottom，right，left都设置为0，然后margin值设置为auto。此时margin的值浏览器就会自动计算，以使得满足定位的包含块的宽度和高度。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><st.
复制链接

扫一扫