下面介绍关于html元素水平居中的几种方式
1、对于行内元素采用text-align:center;的方式
2、采用margin:0 auto;来实现水平居中显示
3、用table实现
4、块级的元素但是通过转换成行内元素来实现块级元素的水平居中显示
5、父子元素都采用相对定位，父元素left:50%;子元素left:-50%;相对自己的长度减回50%，这样实现向右偏移后拉回多的部分
6、采用css3的flexbox，display:flex;
7、用父元素的 display:relative;直接采用position:absolute;left:0;right:0;margin:auto来实现水平以居中
下面是讲解的具体的代码：
在html中使文字水平剧中的属性是align=center，垂直居中需要使用css中的line-height属性。
工具原料：编辑器、浏览器
1、设置一个固定宽高的div，然是设置其水平垂直都居中，代码如下：
<div align="center" vertical-align="middle">水平垂直居中文字
</div>
<style>
div{
border: 1px solid #000000;
width: 400px;
height: 400px;
margin: 0 auto;
line-height:400px;
}
</style>
2、运行的效果如下图：
html中，让文字居中的css代码：1、平水居中：text-align:center；2、垂直居中：line-height:height;
具体代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字垂直居中</title>
<style type="text/css">
body{background: #ddd;}
div{width:300px;height:180px;margin:10px auto;color:#fff;font-size:24px;}
.box1{background: #71a879;text-align: center;}
.box2{background: #6a8bbc;line-height: 200px;}
.box3{background: #dea46b;text-align: center;line-height: 200px;}
</style>
</head>
<body>
<div class="box1">文字水平居中</div>
<div class="box2">文字垂直居中</div>
<div class="box3">文字水平垂直居中</div>
</body>
</html>
效果：
text-align:center;//居中
如：<div class="jz">居中</div>
css为：.jz{text-align:center;}
方法2：在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight; content 清除浮动，并显示在中间。
html：<div id="floater"></div><div id="content">Content here</div> css:#floater{float:left; height:50%; margin-bottom:-120px;}#content {clear:both; height:240px; position:relative;}
方法3：定位：使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的。
html:<div id="content">Content here</div>
css:#content { position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height:240px; width:70%;}
方法4：单行上下居中，可以设置行高为盒子高度，这样文字就可以上下居中。
即：line-height的高度要等于外面div的height。
<center></center> (在整个页面中居中)本回答被提问者采纳
