标签：居中 定位 显示 50% left margin CSS absolute
前言
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
一、absolute 绝对定位
absolute 绝对定位 这是我们最常用的一种居中定位写法 要求必须确定div的宽高度 目前市面上的浏览器基本上都支持这种写法：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>absolute居中定位</title>
<style>
*{
margin:0;
padding:0
}
.absoluteCenter{
width:600px;
height:400px;
position:absolute;
background: rgb(50,183,97);
left:50%; top:50%;
margin-left: -300px;
margin-top: -200px;
}
</style>
</head>
<body>
<div class="absoluteCenter">我是absolute居中定位</div>
</body>
</html>
二、translate定位
translate定位 这是css3 transform的属性 通过自身的偏移来定位 而且他有个极大的好处 不需要知道div的宽高度 就像js里的this self一样 可以将宽高度设为百分比 IE browser<IE9不支持 在移动端使用较好：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>translate居中定位</title>
<style>
*{
margin:0;
padding:0
}
.translateCenter{
width: 40%;
height: 20%;
position: absolute;
left:50%; top:50%;
transform:translate(-50%,-50%);
background: #2d2d2d;
}
</style>
</head>
<body>
<div class="translateCenter">我是translate居中定位</div>
</body>
</html>
三、margin居中定位
margin居中定位 不需要确定div的宽高度 让top,bottom,left,right都为0 再加个margin:auto 。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin居中定位</title>
<style>
*{
margin:0;
padding:0
}
.marginCenter{
width:200px;
height: 200px;
position: absolute;left:0;
top:0; right:0; bottom: 0;
margin: auto;
background: #f2056e;
}
</style>
</head>
<body>
<div class="marginCenter">我是margin居中定位</div>
</body>
</html>
四、fixed的居中定位
fixed的居中定位 这个用的最多的可能就是导航条这块儿 让导航条居中显示不随页面滚动
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fixed居中定位</title>
<style>
*{
margin:0;
padding:0
}
.fixedCenter{
max-width:980px;
height:70px; position:fixed;
margin:0 auto;
left:0;
right:0;
background:rgb(67,163,244);
}
</style>
</head>
<body>
<div class="fixedCenter">我是fixed居中定位</div>
</body>
</html>
标签：居中,定位,显示,50%,left,margin,CSS,absolute 来源： https://blog.csdn.net/weixin_51663736/article/details/112849259
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。