宽高不定div水平、垂直居中

最新推荐文章于 2022-05-18 21:49:22 发布

小男哥、

最新推荐文章于 2022-05-18 21:49:22 发布

阅读量642

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/EnjoyLearning_zn/article/details/107106234

html 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在前端开发中如何实现宽高不确定的div水平垂直居中，重点探讨了使用Flex布局和absolute定位结合transform的两种常见方法，这两种方法在自适应页面布局中十分关键，也是前端面试的常考知识点。

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

宽高不确定div居中

宽高不定的div水平垂直居中在前端页面布局中经常用到，它能够根据当前页面的大小做到自适应，使页面展示更协调；由于比较重要，因此在前端面试的时候此知识点会经常被问到。

水平垂直居中方式一：使用flex布局：

<body>
    <div id="div1">
        <div id="subDiv1"></div>
    </div>
</body>
<style>
	html,body{
       height: 100%;
       width: 100%;
       margin: 0;
       padding: 0;
   }
   #div1{
     border: 1px red solid;
     height: 100%;
     width: 100%;
      /*方法一： flex布局*/
     display: flex;
     align-items: center;/*垂直居中*/
     justify-content: center;/*水平居中*/
  }
  #subDiv1{
	  width: 300px;
	  height: 400px;
	  border: 1px solid green;
  }
</style>

水平垂直居中方式二：absolute定位 + transform：

#div1{
	border: 1px red solid;
	height: 100%;
	width: 100%;
	position: relative;
}
#subDiv1{
   width: 300px;
   height: 400px;
   border: 1px solid green;

   /*方法二：使用transform属性*/
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}