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

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

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

宽高不确定div居中

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

  1. 水平垂直居中方式一:使用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>

  1. 水平垂直居中方式二: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%);
}

上述两种方式都能实现div如下的水平、垂直居中:

居中

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值