1、通过绝对定位的方式 absolute 负margin
首先知道子元素的宽高,给子元素设置top:50%;left:50%,但绝对定位是基于子元素的左上角,我们所希望的效果是子元素的中心居中示。借助外边距的负值,负的外边距可以让元素向相反方向定位。通过指定子元素的外边距为子元素宽度一半的负值,就可以让子元素居中了
2、absolute transform (过渡)
使用绝对定位的方式实现水平垂直居中。容器设置position: relative。子元素设置 position: absolute; left: 50%; top: 50%; transfrom: translate(-50%, -50%);
3、absolute margin auto
将子元素的上下左右距离都设为0,然后将margin设为auto,这种方法也需要知道子元素的宽高。
4、使用flex布局设置居中
利用弹性布局(flex),实现水平居中,其中justify-content 用于设置弹性盒子元素在主轴(横轴)方向上的对齐方式
给容器设置:
display: flex;写在父元素上这就是定义了一个伸缩容器
justify-content主轴对齐方式,默认是横轴
align-items 纵轴对齐方式,默认是纵轴
5、给容器加给伪元素line-height
设置line-height等于容器的高度。给孩子设置display: inline-block;。只对文本有效果,对定宽高的div是没有用的。所以在文本水平垂直居中时使用。
6、tabel-cell实现垂直居中
css新增的table属性,可以让我们把普通元素,变为table元素的现实效果,通过这个特性也可以实现水平垂直居中
而且tabel单元格中的内容天然就是垂直居中的,只要添加一个水平居中属性就好了
使用tabel-cell实现垂直居中,容器设置 display: table-cell;;
vertical-align: middle属性设置元素的垂直对齐方式
子元素如果是块级元素,直接使用左右margin:auto实现水平居中。如果是行内元素,给容器设置text-align: center
利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素inline, 内联块inline-block, 内联表inline-table, inline-flex元素水平居中都有效。