领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

css中如何让div水平居中(上) 怎么让div水平居中

nixiaole 2024-11-12 13:43:51 知识剖析 23 ℃

前端面试题中经常会出现这个问题，接下来，小郭就带你揭秘几种最常见的答案。

先设定一个html结构以及css的基本样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>如何让div实现水平居中</title>
</head>
<body>
    <div id="dad">
        <div id="son"></div>
    </div>
</body>
</html>

css样式

#dad{
    width: 400px;
    height: 200px;
    border: 3px solid green;
    margin: 30px auto;
}
#son{
    width: 100px;
    height: 100px;
    background: purple;
}

方法一：纯margin

/*css处添加下面代码*/
#son{
		margin:0 auto;
}

方法二：position定位

/*css处添加下面代码*/
#dad{
    position: relative;
}
#son{
    position: absolute;
		left:50%;
    margin-left:-50px;
}
/*注意：margin-left是负值，是#son这个div宽的一半*/?

方法三：flexbox

/*css处添加下面代码*/
#dad{
    display: flex;
    justify-content: center;    
}
/*注意：弹性盒子的大部分属性都是写在父级上的*/

以上三种是最常见的，下期我们来讲讲其他奇形怪状的方法～

关注我，带你了解更多前端干货！

学前端，就选锐盈课堂！

Tags：

猜你喜欢

最近发表
标签列表