水平居中
默认html:
<div class="parent"><div class="child">child</div></div>
默认css:
.parent{width: 400px;height: 80px;line-height: 80px;background: #ccc; }.child{width: 80px;height: inherit;color: #fff;background: #000;}
图示:
水平居中:
① 使用inline-block + text-align
使用text-align可以使内联标签、内联块的标签进行水平居中,那么我们就可以在子级child从块级标签变成内联块便签,在其父级使用text-align进行水平居中即可,代码添加如下:
.parent{text-align: center;}.child{display: inline-block;}
图示:
② 使用table + margin
子级使用table让其具有表格块级元素的特性,此时可以通过margin左右auto的特性,将其水平居中代码如下:
.child{5display: table;margin: 0 auto; }
图示:
③ 使用相对定位和绝对定位position + transform
父级使用relative相对定位,子级child使用absolution相对父级进行绝对定位,然后子级通过left50%,将其最左边定位到父级的中间部位,然后通过transform中的translateX为-50%,将其中心定位到父级的中心部分代码如下:
.parent{position: relative;}.child{position: absolute;left: 50%;-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%); transform: translateX(-50%); }
图示:
④ 使用flex + justify-content
将父级内部元素的布局更改为flex布局,并且通过justify-content约束内部元素为水平居中,代码如下:
.parent{display: flex;justify-content: center;}
当然也可以使用flex + margin也是可以进行水平居中的,代码如下:
.parent{display: flex;/* justify-content: center; */}.child{margin: 0 auto;}
两种都可以将内部元素进行水平居中,图示:
垂直居中
默认html:
<div class="parent"><div class="child">child</div></div>
默认css:
.parent{width: 80px;height: 400px;background: #ccc; }.child{width: inherit;height: 80px;color: #fff;background: #000;}
图示:
垂直居中:
① 使用table-cell + vertical-align
同理使用表格格元素的特性代码如下:
.parent{display: table-cell;vertical-align: middle;}
图示:
② 使用相对定位决定定位position + transform
同水平居中的原理一下,配合position和transform的自身偏移即可完成代码如下:
.parent{position: relative;}.child{position: absolute;top: 50%;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%); transform: translateY(-50%); }
③ 使用flex定位flex + align-items
父级使用flex布局配合align-items实现内部元素垂直居中代码如下:
.parent{display: flex;align-items: center;}
同理flex布局可以使用margin:
.parent{display: flex;/* align-items: center; */}.child{margin: auto 0;}
两种方法都可以是元素垂直居中
图示:
水平垂直居中
默认html:
<div class="parent"><div class="child">child</div></div>
默认css:
.parent{width: 400px;height: 400px;background: #ccc;}.child{width: 80px;height: 80px;line-height: 80px;text-align: center;color: #fff;background: #000;}
图示:
水平垂直居中:
①inline-block + text-align + table-cell + vertical-align
根据利用单元格特性的思路就是结合水平居中的inline-block + text-align
和垂直居中的table-cell + vertical-align
代码如下:
.parent{display: table-cell;vertical-align: middle;text-align: center;}.child{display: inline-block; }
图示:
② 使用相对和绝对定位position + transform
同样综合了水平居中和垂直居中的position + transform
代码如下:
.parent{position: relative;}.child{position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
原理不需多讲,就是全局top和left让内部元素的左上角对准父级的中心,然后自身通过translate进行内部偏移,图示就如上一张一样;
③ 使用相对和绝对定位position + margin
偏移
结合父级相对定位,子级绝对定位,通过top/left/right/bottom
都为0进行上下左右拉伸,最好通过margin为auto的约束元素到父级的中心,具体看代码:
.parent{position: relative;}.child{position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto; }
④ 使用flex布局中的justify-content + algn-items
关于对flex布局不是很了解的可以看这篇文章 flex布局总结,那么我们直接看代码:
.parent{display: flex;justify-content: center;align-items: center;}
结语
关于对水平居中、垂直居中、水平垂直居中的方法总结就到这里,不难看出方法都是万变不离其宗,整体下来很多都是差不多的,好了,如有错误,欢迎指正,小弟承蒙各位大佬的意见~