div居中的方法

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yuntian1995/article/details/77543158

居中,这是个老生常谈的问题。

我一直以为这个根本不用去想他,用多了自然知道,没想到在一次面试上碰到,脑子里一时居然想不起来,妥妥的是挂了,回家赶紧做下笔记

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
</head>
<body> 
  <div class='father'> 
    <div class='son'></div> 
  </div>
</body>
</html>

先上html的内容

      .father{
          width:500px;
          height:600px;
          border:1px solid gray;
      }
      .son{
          width:70px;
	  height:70px;
	  border:1px solid red;
      }
再是一部分默认的样式

需求是:让son在father里上下居中。

第一种方法:

.father{
        position:relative;
}
.son{
        position: absolute;
        top:50%;
        left:50%;
        margin:-35px 0 0 -35px;
}

第二种方法:

.father{
  display: flex;
  align-items: center;//使子元素 垂直居中
}

第三种方法

.father{
  display: table-cell;
  vertical-align: middle;
}

第四种方法

.father{
   position:relative;
}
.son{
   position: absolute;
   top:0;
   left:0;
   bottom:0;
   right:0;
   margin:auto 
}
第五种方法,这种方法实质上是第一种的变形,将margin改为了translate而已

.son{
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-35px,-35px);
}
暂时能想到的就那么多,其实够用就行。







阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页