CSS元素居中

·  阅读 39

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;
  
复制代码
分类:
前端
标签:
分类:
前端
标签: