前言
在web开发中，我们随处可以看见一些标签或元素的位置需要进行调节。常见的有将按钮放置在页面底部或右下角，或让图片居中对齐。这些问题可以通过CSS样式表解决，但是涉及的CSS属性过多，调整起来比较麻烦。为了方便前端开发者的编码，出现了placement.css。placement.css是一个轻量级的npm包，包含了一些常用的带有位置调整属性的CSS类，可以帮助开发者快速解决元素位置的问题。
安装
在开始使用之前，我们需要先安装placement.css。可以通过npm指令安装，也可以直接从Github下载。
npm install placement.css --save 或 git clone https://github.com/chriswrightdesign/placement.css
使用
安装完成之后，我们就可以开始使用啦！在你的HTML文件中添加一个class属性，引入placement.css样式即可。下面是placement.css常见的几个位置调整属性及其对应的class。
居中对齐
垂直居中
align-middle
水平居中
justify-center
垂直水平都居中
align-middle justify-center
放置于特定位置
内容放置于页面底部
abs-bottom
内容放置于页面顶部
abs-top
内容放置于页面右下角
abs-bottom-right
内容放置于页面左下角
abs-bottom-left
内容放置于页面右上角
abs-top-right
内容放置于页面左上角
abs-top-left
相对位置调整
元素距离浏览器左侧位置
offset-left
元素距离浏览器右侧位置
offset-right
元素距离浏览器顶部位置
offset-top
元素距离浏览器底部位置
offset-bottom
绝对位置调整
元素距离父级顶部定位
pos-top
元素距离父级底部定位
pos-bottom
元素距离父级左侧定位
pos-left
元素距离父级右侧定位
pos-right
示例代码
下面展示一个在页面底部放置一个按钮的示例代码。首先，我们在<head>标签中引入placement.css。然后，在<body>标签中添加一个btn类，和一个abs-bottom类。最后，在<button>标签中添加一个btn-default类，和一个align-middle类，就可以实现底部居中放置一个按钮啦！
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
----- ---------------- --------------- ---------------------
-------
------
---- ---------- ------------
------- ------------------ ------------------- ------------
------
-------
-------结论
placement.css是一个非常方便的CSS样式库，可以帮助我们快速解决元素位置问题。本文介绍了使用placement.css的方法，以及常用的位置调整属性及其对应的class。希望大家可以在以后的web开发中，更加便捷地实现元素的位置调整！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559ec81e8991b448d79ab