css元素的水平垂直居中的整理

来源：互联网发布：如何撤销淘宝投诉编辑：程序博客网时间：2024/06/02 03:06

1 块中文字水平居中：text-align:center

text-align 用于块级元素，作用在块元素中的文字或者图片上。使得它们在水平方向上居中。
这个属性只能作用于块元素（或者通过display:block变为块元素的内联元素，但是被控制为内联元素的块元素是不行的）。因为居中，肯定是行居中，如果使用该属性的元素本身不拥有完整的在宽度上的独立空间，它当然没有能力让它内部的文字或者图片居中。

父元素的这个属性对它下面的子元素也起作用，比如一个div设置了text-align居中，则它内部的文字可以居中，它的子div内部的文字也可以居中。但是子元素中文字的居中，是在子div中居中，而不是对于父div居中。也就是，它里面所有的文字，都会相对于最靠近自己的一层div来实现居中。所以，这个属性不能用于div在父div中的整体居中。（不仅仅是div，所有的表现为块元素的元素）。

text-align是块元素对内处理的一个属性，不能让父级块元素中的子块元素居中，若要实现块在父元素中的居中，可以使用如下方法

2 块元素自身水平居中(确定宽度)：

1）方法1：margin

一般情况下，可以设置margin:0 auto;这会使这个块级元素在它的父级元素中水平居中。

效果图如下：

2)方法2

父级元素：relative

子元素：absolute

left：50%

transform：translateX(-50%)

3 块元素自身水平居中(宽度不确定)

可以这样来理解，没有明确设定宽度的block，根据块级元素的性质，它默认是独占一行的，所以这个时候block本身就是浏览器窗口的宽度，就不必要来设置水平居中了。

4 行内元素垂直居中：vertical-align

这个属性用于内联元素（以及被转化为内联元素的块元素）
这样的写法：vertical-align:middle;就可以设置文字或者图片的垂直居中。只要具有行内元素的特性的元素使用这个属性，对它的子元素中的文字和图片也是起作用的。但是作用效果为使得文字或者图片相对于紧靠着它们的父元素来进行居中。这个和text-align上面说过的部分是类似的。

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

复制代码

代码如下:

6 块级元素中的文字图片垂直居中（块的高度不确定的）
　　在块的高度不确定的情况下，其实它的高度就是取决于里面内容的高度。如果内部只有文字或者图片的话，那就自然垂直居中了，其实就不必特意要设置。
如果非要设置什么的话，比如希望块大一些，文字在块中垂直居中好看一点，可以设置内边距，如padding-top:20px;padding-bottom:20px；当然，如果上下内边距设置的不一样，就自然不居中了。

7 块级元素自身的垂直居中

父级元素：relative

子元素：absolute

top：50%

transform：translateY(-50%)

注意不能translateX(-50%)同时使用，因为只会执行一种平移

8 让块级元素下的文字或图片水平垂直居中

9 让父级块元素下的子块元素水平垂直居中

1）方法1

效果

0 0