CSS里的各种水平垂直居中

CSS里的各种水平垂直居中

 

内联元素的特点：

1.     不占据一整行，随内容而定

2.     不可以设置宽高，也不可以设置行高，其宽度随内容增加，高度随字体改变

3.     可以设置内外边界，但内外边界不对上下起作用，只对左右起作用。

 

块级元素的特点：

1.     总是在新行上开始，占据一整行

2.     高度，行高以及内边距和外边距都可以控制

3.     宽度始终与浏览器宽度一致，与内容无关

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

 

使各种元素水平垂直居中的方法：

 

 

a.     块级元素中文字水平居中：

        text-align: center (作用在块中的文字或者图片上，使它们在水平方向上居中)

 

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

        margin: 0 auto;

 

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

          若块元素的子元素也为块元素，则对子元素使用margin: 0 auto；一类的方法

          若块元素的子元素为行内元素，则用text-align: center即可

 

d.     vertical-align（用于行内元素中的垂直居中）

          该属性适用于：内联元素（及被转化为内联元素的块级元素）

                                   display设置为table-cell的元素

                                   <td><tr>这样的元素

 

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

         设置height和line-height的高度相同

 

f． 块级元素中的文字图片垂直居中（高度不确定）

       在块的高度不确定的情况下，它的高度取决于内容的高度，如想让文字和图片垂直居中，将上下内边距设置为一样的即可（padding-top=padding-bottom）

 

g． 其他可采用flex布局

        display:flex （应用在父容器上）

        flex-flow: row wrap;  （主轴方向默认行，wrap控制伸缩容器为多行）

        align-items: center （纵轴对齐伸缩项目，应用于父级伸缩容器）

        justify-content: center;   （主轴对齐伸缩项目，同样应用于父级伸缩容器）

------

块级元素的内容水平垂直居中：

````

<div class='test-box'>

    <div class='test-txt'>水平垂直居中的元素</div>

</div>

.test-box {

width: 200px;

height: 200px;

border: 1px solid red;

text-align: center;    // 行内元素水平居中

}

.test-txt {

     display: inline-block;

     margin-top: 50%;

     transform: translateY(-50%)

}

````