在需求方的原型稿件中, 居中是一个非常常见的要求.
然而在 CSS 中, 居中看起来并不是一个很自然的事情.
据说现代的方法是:
- <style>
- .class {
- display: flex;
- justify-content: center;
- }
- </style>
但大部分情况都不能用. 除非世上所有用户都可劲儿地更新浏览器, 只用一个浏览器. 那真是前端的福音.
下面分水平居中和垂直居中, 谈谈我认识的元素居中方法.
水平居中
块级元素居中
- margin: auto
- <div class="parent">
- <div class="width-not-full margin-auto">
- something
- </div>
- </div>
- <style>
- .width-not-full {
- width: 50%; /* or width: xx px;*/
- }
- .margin-auto {
- margin-left: auto;
- margin-right: auto;
- }
- </style>
首先是这个最熟悉的 margin auto 大法. 当设置块级元素的宽度非 100% 并设置块级元素左右的 margin 为 auto 时, 块级元素就能够相对其父元素水平居中.
优点:
简单.
能适应父元素的宽度变化.
缺点:
只对块级元素起作用.
需要设定元素的宽度. 如果是一个 padding 固定, 而宽度不固定的按钮或者图片, 就并不方便.
内联块的居中
- text-align: center;
- <div class="parent text-align-center">
- <p>block p tag</p> <!-- 文字居于块级元素 p 的正中 -->
- <p class="inline-block">p tag</p> <!-- 元素 p 会居中 -->
- </div>
- <style>
- .text-align-center {
- text-align: center;
- }
- .inline-block {
- display: inline-block;
- }
- </style>
第二种方法, 就是利用 text-align 属性来使元素居中.
text-align 会作用于元素文本内容和子元素的文本内容. 而当其子元素是内联块时, 内联块也能够居中.
这种方法就能够解决第一种方法中宽度不固定的图片或者按钮的问题. 如下所示.
- <div class="parent text-align-center">
- <img xxx class="inline-block"> <!-- 居中 -->
- <a class="inline-block">
- <img> <!-- 居中 -->
- </a>
- </div>
但这种方法的缺点很明显.
语义不直接. text-align 的语义仅仅是对文本进行排列. 并且这个属性的设定会对它的本职工作 -- 排列文本造成影响, 因此如果使用此方法, 而文本的位置如果有不同排列需求, 就需要定义了.
需要处理内联块可能会挤到一行的情况.
父元素宽度不确定, 本身宽度也不确定的元素居中
当需要以窗体作为父元素的不定宽弹窗时就会出现这样的问题.
最简单的方式就是用 js 计算弹窗的位置, 不断重新渲染.
不过仅仅针对水平居中的话, 可以试一试以下这段样式
- .class {
- margin-left: 50%;
- tansform: translate3d(-50%, 0, 0); /* 兼容性 */
- }
原理很简单, 就是将初始靠左的元素, 向右移动父元素宽度的一半, 然后向左移动自身宽度的一半, 自然就水平居中了. 显然, 按照这个思路也可以实现垂直居中.
这个方法看起来很通用, 但因为用得不多, 并不清楚缺点在哪.
可能需要注意的问题有, 性能问题, 兼容性问题.
按照这种思路, 还可以用 position: absolute 和 left:50% 组合来实现.
来源: http://www.jianshu.com/p/b97de2b797e2