css-字体垂直、水平居中

css样式—字体垂直、水平居中

也可以这样

1. 父元素position: relative;
2. 子元素position: absolute; 相对于父元素 left: 50%;top:50%; 相对于自身偏移 transform: translate(-50%, -50%);

<div style="width: 200px; height: 200px; background-color: red;position: relative;">
      <div style="position: absolute; left: 50%;top:50%;transform: translate(-50%, -50%);">
           <i class="el-icon-search" style="background-color: green;font-size: 20px;"></i>
      </div>
</div>

<div class="tt">啦啦啦</div>

.tt{
    padding: 0px;
    width:500px;
    height:200px;
    text-align:center;
    background-color:#F69;
    display: table-cell;
    vertical-align:middle
}

为啥呢，这是。好吧。看样式中  display: table-cell  ，作为表格单元格显示，如此一来， vertical-align:middle  属性起作用了。

去掉display可就不行了哦！！

一：基本概念

　　首先，依旧是概念。介绍一下行内元素和块级元素，这个很重要，因为有的属性只能用于块元素，而有的正好相反，在一定的情况下，它们也可以相互转换，比如用display来进行设置。

1.行内元素(又叫内联元素inline element):

1. 不占据一整行，随内容而定，有以下特点：
2. 不可以设置宽高，也不可以设置行高，其宽度随着内容增加，高度随字体大小而改变。
3. 内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用。
4. 也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用。

常用的内联元素有：

a - 锚点，b - 粗体(不推荐)，br - 换行，em - 强调，font - 字体设定(不推荐)，i - 斜体，img - 图片，input - 输入框，

label - 表格标签

select - 项目选择，small - 小字体文本，span - 常用内联容器，定义文本内区块，strike - 中划线，strong - 粗体强调

1.块级元素block element:

1. 总是在新行上开始，占据一整行;
2. 高度，行高以及外边距和内边距都可控制;
3. 宽度始终是与浏览器宽度一样，与内容无关;
4. 它可以容纳内联元素和其他块元素。

常用的块级元素有：div -最常用的块级元素，dl - 和dt dd搭配使用的块级元素，form - 交互表单，h1 - 大标题，hr - 水平分隔线，ol - 排序表单，p - 段落，ul - 非排序

列表互相转换：使用display设置可以使得行内元素拥有块级元素的特性，反之也可以。

水平居中

块级元素

1. 文字水平居中：text-align 用于块级元素，作用在使用它的块元素中的文字或者图片上。使得它们在水平方向上居中。
   这个属性只能作用于块元素(或者被CSS控制为块元素的内联元素，但是被控制为内联元素的块元素是不行的)。
2. 自身水平居中(确定设置了宽度的块)：margin。这个肯定是接触CSS一开始就知道的了。
   一般情况下，可以设置margin:0 auto;
   这会使这个块级元素在它的父级元素中居中，上下左右都会居中。
   如果只要水平居中的话，就设置margin-left:auto;margin-right:auto;

垂直居中

行内元素

4. vertical-align用于行内元素中的垂直居中

vertical-align，这个可以用的很复杂。只说一下最简单的用法：

这个属性用于

1. 内联元素(以及被转化为内联元素的块元素)
2. display设置为table-cell的元素，

在 firefox 和 ie8 下，可以设置块级元素的 display 值为 table-cell，来激活 vertical-align 属性，显示效果和就和表格中的 valign="center" 一样了。但 ie6,7 并不支持。

3、<td><tr>这样的元素

这样的写法：vertical-align:middle;就可以设置文字或者图片的垂直居中。

只要具有行内元素的特性的元素使用这个属性，对它的子元素中的文字和图片也是起作用的。

但是作用效果为使得文字或者图片相对于紧靠着它们的父元素来进行居中。

这个和text-align上面说过的部分是类似的。

 

5 块级元素中的文字图片垂直居中(针对块的高度确定的，如果块内只有这些文字的话)

我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同!

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

 

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

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