CSS居中小谈

前言

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

正文

内联元素居中方案

水平居中设置:

  1. 行内元素 设置 text-align:center;
  2. Flex布局 设置display:flex;justify-content:center;(灵活运用)

垂直居中设置:

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

    块级元素居中方案

    水平居中设置:

  3. 定宽块状元素 设置 左右 margin 值为 auto;
  4. 不定宽块状元素 a:在元素外加入 table 标签(完整的,包括 table、tbody、tr、td),该元素写在 td 内,然后设置 margin 的值为 auto; b:给该元素设置 display: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属性使内容垂直居中,这个方法在多行文字居中的时候用的比较多;

HTML代码:

CSS代码:

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

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

HTML代码:

CSS代码:

6.Flex布局;

结语

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

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

1 6 收藏 1 评论

关于作者:Damonare

知乎专栏[前端进击者] 个人主页 · 我的文章 · 19 ·          

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部