CSS元素居中

1.实现水平居中和垂直居中？

水平方向:

• 行内元素

  • 1.父为块元素，直接给父设置text-align:center;
  • 2.父不为块元素，修改父为块，再给父设置text-align:center;

• 块级元素

方案1：

- 定宽：谁需居中，给谁设置margin:0 auto;
- 不定宽：默认width(子=父),设置子元素display:inlin-block或者display:inline，给父元素设置text-align:center;
复制代码

方案2：使用定位属性---条件：子绝父相，子元素设置left:50%(让子元素左上角水平居中)

- 定宽:子元素设置margin-left:-width/2或者transform:translateX(-50%);
- 不定宽:CSS3属性transform:translate(-50%);
复制代码

方案3：使用flexbox布局

-给待处理的块级元素的父元素添加display:flex; justify-content:center;
复制代码

垂直方向：

• 单行行内元素:line-height=height
• 多行行内元素:给父元素设置display:table-cell; vertical-align:middle;
• 块级元素

方案1：使用定位，子绝父相，子元素设置top:50%,让子元素的左上角垂直居中

- 定高度：子元素设置margin-top：-height/2，或者transform:translateY(-50%);
- 不定高度:利用CSS3属性设置transform:translateY（-50%）；
复制代码

方案2：使用flexbox布局

- 给待处理的块级元素的父元素设置display:flex;align-items:center;
复制代码

水平垂直方向：
已知高度和宽度的元素

- 子绝父相，再给子元素设置top:0; right:0; bottom:0;left:0; margin:auto;
- 子绝父相,再给子元素设置left：50%; top:50%; margin-left:-width/2; margin-top:-height/2;
复制代码

未知高度和宽度的元素
方案1：使用定位属性

  - 子绝父相：再给子元素设置left：50%; top:50%; transform:translateX(-50%); transform:translateY(-50%);
  
复制代码

方案2: 使用flex布局

 -给父元素设置display:flex;justify-content:center; align-items:center;
  
复制代码