CSS居中小谈

UnClassified admin 102100 0 Comment

前言

CSS居中一直是一个比较敏感的话题,为了以后开发的方便,博主觉得确实需要总结一下了,总的来说,居中问题分为垂直居中和水平居中,实际上水平居中是很简单的,但垂直居中的方式和方法就千奇百怪了。

内联元素居中方案

水平居中设置:

  1. 行内元素 设置 text-align:center;
  2. Flex布局 设置display:flex;justify-content:center;(灵活运用,注意兼容性和前缀)

垂直居中设置:

  1. 父元素高度确定的单行文本(内联元素) 设置 line-height = height;
  2. 父元素高度确定的多行文本(内联元素)
    • a:插入 table (插入方法和水平居中一样),然后设置 vertical-align:middle;
    • b:先设置 display:table-cell 再设置 vertical-align:middle;

块级元素居中方案

水平居中设置:

  1. 定宽块状元素设置 左右 margin 值为 auto;
  2. 不定宽块状元素
  • a:在元素外加入 table 标签(完整的,包括 table、tbody、tr、td),该元素写在 td 内,然后 设置 margin 的值为 auto;
  • b:给该元素设置 displa:inine 方法;
  • c:父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:50%;

垂直居中设置:

1.使用position:absolute(fixed),设置left、top、margin-left、margin-top的属性;

2.利用position:fixed(absolute)属性,margin:auto这个必须不要忘记了;

3.利用display:table-cell属性使内容垂直居中;

4.使用css3的新属性transform:translate(x,y)属性;

5.最高大上的一种,使用:before元素;

6.Flex布局;

结语

博主暂时掌握了这些居中方法,读者如果还有好方法或是觉得那个地方不对,欢迎评论,不吝感谢。

Reproduced please indicate the source: 飞嗨_分享互联网 » CSS居中小谈

Like (0) or Share (0)
Guest Post my comment   Change account
Cancel comment

emoj
(0)person posted

Effective,Professional,Conform to SEO

Contact us