关键词：
水平居中：
1，对于行内元素直接通过text-align:center设置即可
2，对于宽度固定的DIV居中，设置margin:0 auto;就可以，表示让浏览器自动计算左右margin来居中
3，对于宽度不固定的，比如分页的页码，由于不知道会有多少页，所以不能设置固定宽度，有三种方法来设置
a,利用table来设置
<pre style="font-family: Menlo; font-size: 9pt; background-color: rgb(255, 255, 255);"><span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table
margin: 0 auto;
ul
list-style: none;
li
float: left;
li a
display: block;
margin-right: 8px;
</style>
</head>
<body>
<div>
<table>
<tbody>
<tr><td>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</td></tr>
</tbody>
</table>
</div>
</body>
</html>通过设置table的居中，来达到里面单元格居中的效果。缺点是会引入一些无语义的标签
b,通过设置div中元素为inline或inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container
text-align:center;
.container ul
list-style:none;
.container li
margin-right:8px;
display:inline;
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
</html>c,通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container
float:left;
position:relative;
left:50%
.container ul
list-style:none;
position:relative;
left:-50%;
.container lifloat:left;display:block;margin-right:8px;
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
</html>垂直居中：
1，单行文本的垂直居中设置父元素的height与line-height一样就可以
2，多行文本，图片，块状元素的垂直居中有二种方法
a,使用插入 table，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以需要插入table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table tdheight:500px;background:#ccc
</style>
</head>
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
</html>b，利用displa:table-cell属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
</style>
</head>
<body>
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
</body>
</html>这种方法的好处是不用添加多余的无意义的标签，但不兼容 IE6、7
居中与垂直居中(代码片段)
每次面试都是知识收获的过程！1、文本水平居中1<styletype="text/css">2p3width:200px;4height:200px;5border:2pxsolidblack;6text-align:center;78</style>910<p>水平居中</p>效果： 2、文本垂直居中1<styletype=" 查看详情
还不会css水平垂直居中？这里有12种方案(代码片段)
文章目录CSS水平垂直居中水平居中行内元素（text-align）块状元素（margin）多个块状元素水平垂直居中单行文本垂直居中单张图片居中利用表格特性居中基于绝对定位的解决方案方案一方案二方案三方案四基于视口... 查看详情
前端css实现水平居中垂直居中水平垂直居中木鱼精简(代码片段)
...成长，书写五彩人生。📒技术聊斋（一）水平居中1、text-align:center<divclass="wrappe 查看详情
css水平和垂直居中(代码片段)
css垂直和水平居中(代码片段)
css水平+垂直居中布局(代码片段)
css完全居中的div（水平和垂直对齐）(代码片段)
css居中(代码片段)
阅读目录水平居中垂直居中垂直居中:position绝对定位演示垂直居中:flex演示垂直居中:transform演示水平&垂直居中flex1flex2position水平居中1行内块居中设置父元素的text-align:center2块级元素设置当前块级元素(宽度)margin:0auto;3绝对定... 查看详情
css水平和垂直css居中(代码片段)
css垂直水平居中div(代码片段)
css垂直居中详解(代码片段)
一般情况下有的需要问水平居中和垂直居中.常见的水平居中和垂直居中有：水平居中：行内元素：text-align:center;块级元素：margin:0auto;absolute+transform;flex+justify-content:center;垂直居中：line-height:height;absolu 查看详情
css使用css进行垂直和水平居中(代码片段)
css水平和垂直居中图像/div(代码片段)
css实现垂直居中的几种方法(代码片段)
一、单行文本的居中1.文字水平居中1<divclass=‘box‘style="text-align:center;">helloworld</div>2.文本垂直水平居中1<divclass="box2"style="height:200px;line-height:100px;">文本垂直水平居中</div>二、多行文本的垂直居中1.使用disp 查看详情
css实现水平/垂直居中效果(代码片段)
一、如果是已知宽高的元素做水平/垂直居中效果的话，可以直接用具体的数值指定定位布局或偏移布局，这个就不过多讨论。这里主要介绍在不知宽高或需要弹性布局下的几种实现方式。二、1.table表格法思路：显示设置父元素... 查看详情