CSS各种水平垂直居中的方法

一、块级元素的居中

1.块级元素

首先，块级元素总是在新行上开始，占据一整行；

高度、行高以及外边距和内边距都可控制；

块级元素拥有独立的宽度空间，与内容无关，宽度始终和浏览器的宽度一样

块级元素可以容纳内联元素和其他块元素

常用的块级元素：（1）div（2）form-交互表单（3）h1-h6标题（4）p-段落（5）表单-ol-排序表单；ul-非排序表单；

可用display：block/inline进行内联和块级元素的互相转化

2.块中文字水平居中

text-align作用在使用它的块元素中的文字或图片上，使其在水平方向上居中

eg：

    <p style="text-align:center">我是正常p,我设置了居中</p>
​
    <span style="display:block; text-align:center">我其实是一个行内元素span哦，我设置了居中，可以居中并且独占一行</span> 
​
    <p style="display:inline; text-align:center">能不能再同一行,我是被inline了的p，我设置了居中可是不能居中！</p>

对于父子关系的元素，其父元素的属性对下面的子元素也起作用；

例如：父div标签设置了text-align居中，该div中的文字可以居中，则父div下的所有元素均可居中，但需要注意的是：

1.子元素中的文字居中并非是相对于父div（所有元素）而居中的，而是相对于最靠近自己的一层div（元素）来实现居中

3.块元素自身水平居中（确定设置了宽度的块）

/margin的语法/

margin 属性接受 1~4 个值。每个值可以是 ](https://developer.mozilla.org/zh-CN/docs/Web/CSS/length)，[，或 auto。取值为负时元素会比原来更接近临近元素。

• 当只指定一个值时，该值会统一应用到全部四个边的外边距上。

• 指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边。

• 指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的外边距。

• 指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的外边距。

/* 应用于所有边 */
margin: 1em;
margin: -3px;
​
/* 上边下边 | 左边右边 */
margin: 5% auto;
​
/* 上边 | 左边右边 | 下边 */
margin: 1em auto 2em;
​
/* 上边 | 右边 | 下边 | 左边 */
margin: 2px 1em 0 auto;
​
/* 全局值 */
margin: inherit;
margin: initial;
margin: unset;
​

注意： 外边距控制的是元素外部空出的空间。相反，padding 操作元素内部空出的空间

使用margin：0 auto：

会使这个块级元素在它的父级元素中居中，上下左右都会居中

使用margin-left：auto;margin-right:auto;

只有水平居中

4.块元素自身水平居中（不确定宽度的块）

即便块的宽度是不确定的，根据性质也是独占一行

若要对其中内容进行居中的话：

（1）如果块元素的子元素也是块元素的话，则对子元素使用margin auto一类的方式即可

（2）如果块级元素的子元素为行内元素，使用text-align即可解决

（3）对于子元素为块元素的，也可以用display设置为inline然后再用text-align

5.块级元素中的文字图片垂直居中

（1）块的高度确定： 文字在层（块级元素）中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同!

<div style="line-height:500px;height:500;"></div>

（2）块的高度不确定：在块的高度不确定的情况下，其实它的高度就是取决于里面内容的高度。如果内部只有文字或者图片的话，那就自然垂直居中了，其实就不必特意要设置。

如果非要设置什么的话，比如希望块大一些，文字在块中垂直居中好看一点，可以设置内边距，如padding-top:20px;padding-bottom:20px；

　　 当然，如果上下内边距设置的不一样，就自然不居中了。

    <div style="line-height:500px;height:500;"></div>

6.块级元素自身的垂直居中

设置块级元素自身在父元素中的垂直居中，设置外边距即可。如果不想设置水平居中，只要设置上下外边距为auto就好。

也可以采用vertical-align:middle;的方式，但是前提是把display设置为table-cell。这样的话要注意浏览器兼容性问题。