利用css使绝对/相对定位div左右垂直居中

最新推荐文章于 2024-01-26 11:22:40 发布

卷毛崽

最新推荐文章于 2024-01-26 11:22:40 发布

阅读量5.1k

点赞数

分类专栏： H5+CSS 文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_42221321/article/details/118691864

版权

H5+CSS 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了两种使用CSS实现绝对或相对定位的div在父元素中水平垂直居中的方法。方法一涉及调整top和left属性值，方法二利用负margin和CSS3的transform属性。这两种方法在不同场景下具有良好的兼容性和实用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考链接1
参考链接2

例子1：外层div为相对定位，里层div为绝对定位，设置里层div左右垂直居中于外层div
以上代码可以将子div在父div中水平垂直居中对齐，下面就简单介绍一下几个要点:
1.父元素是使用相对定位，这样子元素就可以以它作为位移参考对象。
2.top属性值计算方式:父元素的高度/2-子元素高度/2,
left属性值计算方式:父元素宽度值/2-子元素宽度值/2。

<!DOCTYPE html>
<html>
  <head>
    <meta charset=" utf-8" />
    <title>蚂蚁部落</title>
    <style type="text/css">
      .father {
        width: 600px;
        height: 600px;
        background-color: green;
        margin: 0px auto;
        position: relative;
      }
      .children {
        position: absolute;
        width: 200px;
        height: 200px;
        left: 200px;
        top: 200px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="children"></div>
    </div>
  </body>
</html>

在这里插入图片描述
例子2:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=" utf-8" />
    <title>蚂蚁部落</title>
    <style type="text/css">
      .main {
        width: 400px;
        height: 200px;
        overflow: hidden;
        background-color: #ccc;
        position: absolute;
      }
      .yuan {
        width: 100px;
        height: 100px;
        background-color: yellow;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        position: absolute;
      }
      #left {
        top: -50px;
        left: -50px;
      }
      #right {
        bottom: -50px;
        right: -50px;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="main first">
        <div id="left" class="yuan"></div>
        <div id="right" class="yuan"></div>
      </div>
    </div>
  </body>
</html>

在这里插入图片描述
如图所示，现在要使div垂直居中显示
第一种方法：适用于宽度已经确定
利用负margin，前提是需要知道尺寸。兼容性最好。
设定水平和垂直偏移父元素的50%，
再根据实际长度将子元素上左挪回一半大小

添加以下样式

      .first{
          top: 50%;
          left: 50%;
          margin-left: -200px;
          margin-top: -100px;
      }

在这里插入图片描述
第二种方法：适合不知道具体宽度时,利用CSS3的transform，宽度不定，支持IE9+
实际上于第一种方法相似，只是不知道具体宽度

      .first{
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
      }

在这里插入图片描述