html css怎样让div居中
程序员文章站
2022-05-01 20:18:01
...
很多时候我们都需要div居中
用css3的transform属性即可让div居中
如代码所示
先设置子元素的margin-top和margin-left为50%
接着用transform的translate来移动子元素为-50%
translate相对的是元素本身进行移动，这样移动-50%（元素宽度的一半）即可居中了
不过因为新特性，所以兼容性不好，如果考虑IE的话，慎重使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#parent{
width: 500px;
height: 500px;
background: deepskyblue;
border: 1px solid red;
}
#child{
width: 300px;
height: 300px;
background: deeppink;
margin-left: 50%;
margin-top: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="parent">
<div id="child">child</div>
</div>
</body>
</html>下一篇： 图片自适应div的大小