Html5-CSS之五大居中方式
你是不是也对元素居中的知识点很是模糊？是不是苦于找不到一个总结的通俗易懂的说明？是不是自己懒得去总结？恭喜你，搜到这篇博客！ 这是鄙人在前端的学习与实践中总结出的元素的五大居中方式，黏贴了代码并对代码做了解释，希望对迷茫的有所帮助！
下面的居中示例中，统一使用了同一个div作为父元素和p作为子元素
设置一个div,并且设置了div的宽高边框，div里面设置一个块元素p，设置了它的宽高和背景色
css居中方式1
<!doctype html\n<html\n<head\n<meta charset=utf-8\n<title五大居中1</title\n<style\n*{margin:0;}\ndiv{width:200px;height:300px;border:2px solid #000;margin:200px auto;\ntext-align:center;font-size:0;\n}\ndiv p{width:100px;height:100px;background:#666;\ndisplay:inline-block;vertical-align:middle;\n}\ndiv:after{content:;display:inline-block;height:100%;vertical-align:middle;}\n</style\n</head\n<body\n<div\n\t<p</p\n</div\n</body\n</html\n
这里利用了伪元素让子元素p在div盒子里左右水平居中只需要在它的父元素div里加text-align:center;垂直方向居中需要在父元素后面加了一个伪元素，并使得样式为inline-block;height:100%;就是和父元素一样高，vertical-align:middle;垂直居中，也就是p元素相对与伪元素居中，由于伪元素和div一样高，所以相当于p元素在div里垂直居中。
css居中方式2
<!doctype html\n<html\n<head\n<meta charset=utf-8\n<title五大居中2</title\n<style\n*{margin:0;}\ndiv{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}\np{position:absolute;left:0;bottom:0;right:0;top:0;margin:auto;width:100px;height:100px;background:#f99;}\n</style\n</head\n<body\n<div\n\t<p</p\n</div\n</body\n</html\n
这里利用了定位居中
子元素p设置position：absolute脱离文档流,默认以html作为父元素，所以我们给父元素div设置position:relative;使得p以div为父元素做位置的变动，left:0;tight:0;top:0;bottom:0;（只有设置了定位的元素才可以使用这种方式来移动），最后margin:auto;就会水平和垂直都居中。
css居中方式3
<!doctype html\n<html\n<head\n<meta charset=utf-8\n<title五大居中3</title\n<style\n*{margin:0;}\ndiv{display:flex;justify-content:center;align-items:center;width:300px;height:400px;border:1px solid #000;margin:100px auto;}\np{width:100px;height:100px;background:#f99;}\n</style\n</head\n<body\n<div\n\t<p</p\n</div\n</body\n</html\n
这里利用了弹性盒居中
父元素div设置成弹性盒样式，justify-content:center;主轴居中
align-items:center;垂直居中（而且这两个只能设置在父元素上，弹性盒知识）
css居中方式4
<!doctype html\n<html\n<head\n<meta charset=utf-8\n<title五大居中4</title\n<style\n*{margin:0;}\ndiv{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}\np{width:100px;height:100px;background:#f99;position:absolute;\nleft:50%;top:50%;margin:-50px 0 0 -50px;}\n</style\n</head\n<body\n<div\n\t<p</p\n</div\n</body\n</html\n
利用定位线左上角居中，然后左移子元素宽度的一半，再上移子元素高度的一半。
css居中方式5
<!doctype html\n<html\n<head\n<meta charset=utf-8\n<title五大居中5</title\n<style\n*{margin:0;}\ndiv{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}\np{position:absolute;width:100px;height:100px;background:#f99;left:50%;top:50%;\n\ttransform:translate(-50%,-50%);}\n</style\n</head\n<body\n<div\n\t<p</p\n</div\n</body\n</html\n
利用动画移动属性transform
结语
相信看了上面的有关Html5、css的元素五大居中方式，你们就可以解决自己的小问题了，但是也要养成一个总结的好习惯。好记性不如烂笔头！以前留下来的话语总是有他的道理。Come on！
原文链接：https://blog.csdn.net/qq_38110274/article/details/102756968
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
微信扫一扫 