css3总结之居中

558 0 0

作者:Riemannhan

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

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

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

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）元素都有效，这个我们可以看

内容来源于网络如有侵权请私信删除

标签： HTML CSS HTML5 CSS3

你还没有登录，请先登录或注册！