div居中的方法
程序员文章站
2022-03-02 18:57:07
...
居中，这是个老生常谈的问题。
我一直以为这个根本不用去想他，用多了自然知道，没想到在一次面试上碰到，脑子里一时居然想不起来，妥妥的是挂了，回家赶紧做下笔记
<!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>
.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
}.son{
position: absolute;
top:50%;
left:50%;
transform:translate(-35px,-35px);
}上一篇： SpringBoot引入Thymeleaf的方法介绍（代码）
下一篇： div居中的方法