您的位置：首页 > Web前端 > CSS

css 实现div在页面上的水平居中问题

2018-04-04 16:21 633 查看

css实现一个元素的水平垂直居中与页面中，是搭建页面及样式经常遇到的问题，下面呢，kk把在项目的实践中经常用到的几种方法总结了一下，和大家一起分享~~~（欢迎大家批评指正哦）
先来个效果图

方法一：（直接上代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js基础测试</title>
<style>
body{
margin:0;
padding:0;
}
.parent{
width:80%;
margin:0 10%;
border:5px solid;
text-align:center;/*使子元素的内容居中显示*/
}
.son{
width:200px;
height:200px;
border:2px solid red;
margin: 0 auto;/*使此元素水平居中*/
}
</style>
</head>
<body>
<div class="parent">
<div class="son">我是子元素</div>
</div>
<script>

</script>
</body>
</html>注：重点，son的左右margin值为auto，其他的样式按照需求调试即可。
方法二：（直接代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js基础测试</title>
<style>
body{
margin:0;
padding:0;
}
.main{
width: 200px;
height: 200px;
border: 3px solid red;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="main">

</div>
<script>

</script>
</body>
</html>利用定位结合margin实现

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 水平居中居中显示

相关文章推荐

新的分享

章节导航