Css实现元素上下左右都居中的4种方法

例：居中.wrapper里的.content

一. 已经元素的宽高的前提下：

(1)  left:50%top:50%

父元素设置相对定位，position: relative 

子元素(要居中的元素)设置绝对定位，position: absolute  left: 50%   top: 50%

（2）设置margin: auto

父元素设置相对定位,position: relative

子元素(要居中的元素)设置绝对定位，position: absolutemargin: auto

(3)   flex布局

父元素设置 display: flex  justify-content: center   align-items: center

二.未知元素宽高的情况下：

（1）四个方向设置值，把元素撑开

父元素设置相对定位，position: relative 

子元素设置绝对定位，position: absolutetop与bottom设置一样的值，left与right设置一样的值，把容器撑开

HTM是HyperTextMark-upLanguage的缩写，即超文本标记语言（标准通用标记语言下的一个应用），是WWW的描述语言。HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等。

本篇介绍HTML中如何设置水平居中。

1、第一种定宽块状元素水平居中。设置“左右margin”值为“auto”来实现居中。代码如图。

2、浏览器查看结果如图所示。

3、第二种不定宽元素。设置的居中的元素外面加入一个table标签。为这个table设置左右margin居中。代码如图。

4、结果显示如图所示。

5、第三种不定宽块状元，改变块级元素的display为inline类型，然后使用text-align:center来实现居中。代码如图。

6、打开浏览器显示结果如图所示。

1、对于单行文本元素, 设置元素的样式属性：

优点：适合所有浏览器，没有足够空间时，内容不会被切掉

缺点：仅适合应用在文本和图片上，当文本不是单行时，效果极差

2、设置元素的样式属性：

优点：能在各个浏览器工作，结构简单明了，不需增加额外的标签

缺点：由于固定死元素的高度，致使没有足够的空间时，当内容超过元素的大小时会出现滚动条

注意：这是使元素垂直居中，不是元素的内容。如果要使元素内容剧中，参考方法1

3、使用div模拟表格效果

优点：元素内容不会因为没有足够的空间而被切断或者出现滚动条。

缺点：结构复杂，IE6-IE7无法正常运行

1、参考垂直居中显示的方法2

2、设置元素的margin

a)设置元素的宽度

b) margin-left: 0 auto

3、设置元素的样式属性text-align

未完！

---