Html5-CSS之元素的五⼤居中⽅式
Html5-CSS之五⼤居中⽅式
你是不是也对元素居中的知识点很是模糊？是不是苦于不到⼀个总结的通俗易懂的说明？是不是⾃⼰懒得去总结？恭喜你，搜到这篇博客！ 这是鄙⼈在前端的学习与实践中总结出的元素的五⼤居中⽅式，黏贴了代码并对代码做了解释，希望对迷茫的有所帮助！
下⾯的居中⽰例中，统⼀使⽤了同⼀个div作为⽗元素和p作为⼦元素
设置⼀个div，并且设置了div的宽⾼边框，div⾥⾯设置⼀个块元素p，设置了它的宽⾼和背景⾊
css居中⽅式1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五⼤居中1</title>
<style>
*{margin:0;}
div{width:200px;height:300px;border:2px solid #000;margin:200px auto;
text-align:center;font-size:0;
}
div p{width:100px;height:100px;background:#666;
display:inline-block;vertical-align:middle;
}
div:after{content:"";display:inline-block;height:100%;vertical-align:middle;}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
这⾥利⽤了伪元素让⼦元素p在div盒⼦⾥左右⽔平居中只需要在它的⽗元素div⾥加text-align:center；垂直⽅向居中需要在⽗元素后⾯加了⼀个伪元素，并使得样式为inline-block;height:100%；就是和⽗元素⼀样⾼，vertical-align:middle；垂直居中，也就是p元素相对与伪元素居中，由于伪元素和div⼀样⾼，所以相当于p元素在div⾥垂直居中。
css居中⽅式2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五⼤居中2</title>
<style>
*{margin:0;}
div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{position:absolute;left:0;bottom:0;right:0;top:0;margin:auto;width:100px;height:100px;background:#f99;}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
这⾥利⽤了定位居中
⼦元素p设置position：absolute脱离⽂档流，默认以html作为⽗元素，所以我们给⽗元素div设置position:relative；使得p以div为⽗元素做位置的变动，left:0;tight:0;top:0;bottom:0;（只有设置了定位的元素才可以使⽤这种⽅式来移动），最后margin:auto；就会⽔平和垂直都居中。
css居中⽅式3
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五⼤居中3</title>
<style>
*{margin:0;}
div{display:flex;justify-content:center;align-items:center;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{width:100px;height:100px;background:#f99;}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
div中的div居中</html>
这⾥利⽤了弹性盒居中
⽗元素div设置成弹性盒样式，justify-content:center；主轴居中
align-items:center；垂直居中（⽽且这两个只能设置在⽗元素上，弹性盒知识）
css居中⽅式4
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五⼤居中4</title>
<style>
*{margin:0;}
div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{width:100px;height:100px;background:#f99;position:absolute;
left:50%;top:50%;margin:-50px 0 0 -50px;}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
利⽤定位线左上⾓居中，然后左移⼦元素宽度的⼀半，再上移⼦元素⾼度的⼀半。
css居中⽅式5
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五⼤居中5</title>
<style>
*{margin:0;}
div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{position:absolute;width:100px;height:100px;background:#f99;left:50%;top:50%;
transform:translate(-50%,-50%);}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
利⽤动画移动属性transform
结语
相信看了上⾯的有关Html5、css的元素五⼤居中⽅式，你们就可以解决⾃⼰的⼩问题了，但是也要养成⼀个总结的好习惯。好记性不如烂笔头！以前留下来的话语总是有他的道理。Come on！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。