android studio table居中代码_css-水平居中、垂直居中、水平垂直居中方法

首先呢先介绍下居中的方法都有哪些？

1.文字水平垂直居中代码片段

<!-- html部分 -->
    

2.行内元素水平居中

<

3.块级元素水平居中

1.定宽元素水平居中

只需给需要局中的块级元素加margin：0 auto，
但这里需要注意的是，这里的块元素的宽度width值要有

<

1.2.不定宽块级元素水平居中

不定宽，就是块级元素宽度不固定
方法1：设置table，通过给要居中显示的元素，
设置display：table，然后设置margin：0 auto来实现

<!-- html部分 -->
    

1.3.设置inlie-block（多个块元素）

子元素设置inline-block,同时父元素设置text-align：center

<!-- html部分 -->
    

1.4.设置flex布局

只需把要处理的块元素的父级设置display：flex，justify-content：center；

<!-- html部分 -->
    

2.垂直居中

2.1单行文本垂直居中

<!-- html部分方案一 -->
    

2.2多行文本垂直居中

通过设置父元素table，子元素table-cell和vertical-align
vertical-align：middle的意思是把元素放在父元素的中部

<!-- html部分 -->
    

2.3块级元素垂直居中

方法1：flex布局
在需要垂直居中的父元素上，设置display：flex和align-items：center
注意：父元素必须要设置height值

<!-- html部分 -->
    

2.4利用position和top和负margin（需知宽高）

1.设置元素为absolute/relative/fixed
2.margin=负一半

<!-- html部分 -->
    

2.5利用position和top/bottom和margin:auto（注意不是margin:0 auto）

1.position：absolute/relative/fixed
2.top/bottom:0
3.margin:auto

<!-- html部分 -->
    

2.6利用position和top和transform

transform中的translate偏移的百分比就是相对元素自身的尺寸而言的。
transform方法，可用于未知元素大小的居中

<!-- html部分 -->
    

3、水平垂直居中

方法1：绝对定位+margin：auto

<!-- html部分 -->
   

方法2：绝对定位+负margin

<!-- html部分 -->
   

方法3：绝对定位+transform

<!-- html部分 -->
    

方法4：flex布局

<!-- html部分 -->
    

方法5：设置table-cell来实现居中
设置
display:table-cell;
text-align:center;
vertical-align: middle;

<!-- html部分 -->
    

此文章仅供复习。