1、打开WebStorm集成开发工具，新建‘test.html’网页，在网页的同级目录新建bootstrap文件夹，并在文件夹内放入bootstrap.min.css文件，版本3.7。
2、在‘test.html’引入bootstrap.min.css文件，并在body标签内放一个div，代码如下：<!DOCTYPE html><稆糨孝汶;html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link ref="stylesheet" href="bootstrap/bootstrap.min.css"></head><body> <div style="width: 100px;height: 200px;background-color:red">hhhh</div></body></html>
3、查看网页效果如下图,在整个页面左上角。
4、修改‘test.html’代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link ref="stylesheet" href="bootstrap/bootstrap.min.css"></head><body> <div style="width: 100px;height: 200px;background-color:red;margin: 0 auto">hhhh</div></body></html>仅增加了一个样式margin: 0 auto
5、再次刷新网页查看效果，div水平居中了
6、修改代码，把div标签换乘button，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link ref="stylesheet" href="bootstrap/bootstrap.min.css"></head><body> <button style="width: 100px;height: 200px;background-color:red;margin: 0 auto">hhhh</button></body></html>
7、再次刷新网页查看效果，button回到了左上角
8、修改代码如下：<!DOC哌囿亡噱TYPE html><html lang="en"><head> <meta ch锾攒揉敫arset="UTF-8"> <title>Title</title> <link ref="stylesheet" href="bootstrap/bootstrap.min.css"></head><body> <button style="width: 100px;height: 200px;background-color:red;margin: 0 auto;display: block;">hhhh</button></body></html>增加了display:block属性
9、再次刷新网页查看效果，button水平居中了,这就是bootstrap元素水平居中的方法，注意文字水平居中使用text-align:center属性
