水平居中：
行内元素：可以父级利用text-align: center进行水平居中
块级元素：
①可以利用margin: 0 auto进行水平居中
②使用position决定定位
利用margin-left进行左偏移
利用transform进行左偏移
③使用flex布局
垂直居中：
内联元素：可以使用line-height进行垂直居中
块级元素：
①使用position定位
利用margin-top进行上偏移
利用transform进行上偏移
②使用flex布局
常用的基本就这些，当然还有grid布局，父级设置为table布局，进行设置等方案，这边不做过多赘述。
1、首先打开可以编写前端代码的编辑器，新建一个test.html文件，HTML文件是前端页面文件，可以在浏览器直接打开查看效果。新建文件后写入基本的代码，如图所示。
2、接下来在body标签里面写入一个div标签，并在里面写一个ul标签，ul里面包含四个li标签，并写上1111,2222,3333,4444的文本。同时，还有写入id或class属性，以便于后面设置样式。
3、上一步的效果如图所示，可以看到，现在只是一个普通的列表，四个元素前面都有黑点。这是ul、li标签的默认样式。。
4、接着设置居中效果，在style标签里面写入如图所示代码，对元素的样式进行设置。
5、写入代码后，在浏览器里打开该文件，查看效果，如图所示，达到了居中的效果。
1、首先打开vscode编辑器，新建一个html文档，里面写入一个外层的div，再加入一行table表格：
2、然后在上方的style标签中加入css样式，设置table标签的样式，table的元素具有长度自适应性，其长度根据其内文本长度决定，只要设置margin属性，让左右设置为auto就回自动分配剩余空间，也就是元素两侧的区域各占50%，那么元素就左右居中了：
3、最后打开浏览器就可以看到居中的一行表格了：
