在 CSS 中实现水平居中,会比较简单。常见的,如果想实现 inline 元素或者 inline-block 元素水平居中,可以在其父级块级元素上设置
实现;如果想实现块级元素的水平居中对齐,可以设置
- text-align: center
。而如果想实现垂直居中对齐,或许就不太容易。
- magin: auto
以下,我总结了一些实现水平垂直居中对齐的一些方法。如果有什么不足之处,望指出。
水平垂直居中的实现可以分为两大内容,一是高度随内容自适应变化,一是固定高度。
最常用的方法是使用 height + line-height 的方式,设置同样的值,配合 text-align 的使用,即可实现文本的水平垂直居中对齐
- <div class="container">Hello World!</div>
- .container {
- width: 300px;
- height: 300px;
- line-height: 300px;
- text-align: center;
- border: 1px solid red;
- }
缺点:固定高度,无法实现两行文本的垂直居中对齐
使用绝对定位的方法,配合 margin 负值使用。可以实现元素的水平垂直居中效果。
- <div class="container">Hello World!</div>
- .container {
- position: absolute;
- left: 50%;
- top: 50%;
- margin-left: -150px;
- margin-top: -150px;
- width: 300px;
- height: 300px;
- border: 1px solid red;
- }
当然了,可以使用 CSS3 的 calc 函数简化上面的 CSS 代码
- .container {
- position: absolute;
- left: calc(50% - 150px);
- top: calc(50% - 150px);
- width: 300px;
- height: 300px;
- border: 1px solid red;
- }
缺点:固定高度,高度无法自适应内容。元素脱离文档流。
添加空标签的方式,并且使该元素浮动,脱离文档流,避免影响其他元素的布局。
- <div class="space"></div>
- <div class="container">
- <div class="inner">
- hello world!
- </div>
- </div>
- .space {
- float: left;
- height: 50%;
- margin-top: -150px;
- }
- .container {
- clear: both;
- height: 300px;
- border: 1px solid red;
- position: relative;
- }
缺点:这种方式下的垂直居中需要固定高度,无法实现内容自适应高度。同时,出现多余的空 div 元素。
CSS3 中有 transform 属性,此属性下有一个 translate 移动函数,此函数接受两个参数。如果两个参数都为百分比值,此时会基于自身宽度和高定进行移动。此函数移动的机制同
相似。
- position:relative
- <div class="container">Hello World!</div>
- .container {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%); // 自身宽度和高度的一半
- border: 1px solid red;
- }
优点:无需定高度。高度随内容自适应。 缺点:元素脱离文档流。如果需要居中的元素已经在高度上超过了视口,那它的顶部会被视口裁切掉。
我们知道,可以使用 margin 来实现水平居中对齐,而无法使用 margin 实现垂直居中的原因在于 margin 的百分比值是基于宽度计算的。
- <div class="container">Hello World!</div>
- .container {
- width: 300px;
- margin: 50% auto 0;
- border: 1px solid red;
- tarnsform: translateY(-50%);
- }
上面代码中,由于百分比是基于父元素(此时的父元素为 body 元素)的宽度计算的,所以此时的 50% 加上 translate 负值并不能实现垂直居中布局。
不过,CSS 中存在一个 vh(视口高度), 也就相当于 DOM 中
或者
- document.body.clientHeight
的高度,1vh=1%,即 1vh 等于视口高度的 1%。vh 单位的浏览器兼容性问题可看 vh。因此,以上代码可改为如下,即可实现水平垂直居中效果。
- document.documentElement.clientHeight
- <div class="container">Hello World!</div>
- .container {
- width: 300px;
- margin: 50vh auto 0;
- transform: translateY(-50%);
- border: 1px solid red;
- }
CSS3 中存在 flex 布局(伸缩布局盒模型,也叫弹性布局盒模型),对于 flex 熟悉的朋友来说,使用 flex 实现水平垂直居中是再简单不过的了。
- <div class="container">
- <div class="inner">
- <p>hello world!</p>
- </div>
- </div>
- .container {
- display: flex;
- height: 100vh;
- }
- .inner {
- margin: auto;
- }
当我们使父元素
时,
- display: flex
不仅可以水平居中,也能够实现垂直居中。这是因为 auto 外边距会平分水平或垂直方向上的额外空间。
- margin: auto
当然,也可以使用
来定义弹性项目主轴的对齐方式,
- justify-content: center
来定义弹性项目侧轴的对齐方式。
- align-items: center
- <div class="container">
- <div class="inner">
- <p>hello world</p>
- </div>
- </div>
- .container {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
- }
可以使用
来模拟表格,并给子元素设置
- display: table
,让其成为表格的某个单元格,同时设置
- display: table-cell
,即可实现垂直居中布局
- vertical-align: middle
- <div class="container">
- <div class="inner">
- hello world!
- </div>
- </div>
- .container {
- display: table; /* 让div以表格的形式渲染 */
- width: 100%;
- border: 1px solid red;
- }
- .inner {
- display: table-cell; /* 让子元素以表格的单元格形式渲染 */
- text-align: center;
- vertical-align: middle;
- }
使用此种方式,不需要固定高度。只需要给定任意高度或者不给高度,即可实现水平垂直居中效果。
来源: http://www.cnblogs.com/unclekeith/p/7082745.html