欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css3总结之居中

程序员文章站 2022-10-03 22:49:04
居中在前端布局上很常见,也很常用,也是最基本的技巧。居中效果在方向控制上基本可以分解成水平居中,垂直居中和水平垂直居中。 针对调整的元素不同,具体的处理方式上有些差异。这里我们先不讲绝对定位下的居中,绝对定位下的居中方法很多,变化也多。下面讲的都是非绝对定位下的方法,原则上有两个,一个是常用,另外一 ......

  居中在前端布局上很常见,也很常用,也是最基本的技巧。居中效果在方向控制上基本可以分解成水平居中,垂直居中和水平垂直居中。

  针对调整的元素不同,具体的处理方式上有些差异。这里我们先不讲绝对定位下的居中,绝对定位下的居中方法很多,变化也多。下面讲的都是非绝对定位下的方法,原则上有两个,一个是常用,另外一个是兼容性最好。

水平居中是居中效果中最常见的,最常用的方法莫过于下列两种:

html:

<div class="box">薛定谔的喵!</div>

1、text-align center

.box {
  text-align: center;
}

 

2、定宽元素 margin: 0 auto;

.box {
    width: 96px;
    margin: 0 auto;  
}

结果自然不言而喻,都是居中的,

如果是对于文本的水平居中更倾向于第一点,因为在第二点上压根就不好计算文本的宽度,即使计算会有小许的误差,虽然对文字兼容性上不是很好,却很适合于按钮或者是宽度固定的块状元素,

反过来需要说明的是第一点也不单单是对文字有效,而是对内联(inline-xx)元素都有效,这个我们可以看