css的水平垂直居中
1.父元素使用flext布局,justify-content:center,align-items:center
2.父元素使用grid布局
.container{ display: grid; place-items: center; }
3.绝对定位法+偏移法
父元素使用相对定位,子元素绝对定位,并设置top:50%,left:50%。
- 若子元素不知道宽高,使用transform:translate()将元素相对自身的位置向x轴和y轴各移动-50%
.container{ position: relative; height: 400px; } .box{ position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); }
- 在子元素有固定宽高的情况下,将margin-top设置为高度一半的负值,margin-left设置为宽度一半的负值
.container{ position: relative; height: 400px; } .box{ width: 200px; height: 200px; position: absolute; top:50%; left:50%; margin-left:-100px; margin-top: -100px; }
又或者将子元素的top、left、right、bottom都设为0,然后使用margin:auto
.container{ position: relative; height: 400px; } .box{ width: 200px; height: 200px; position: absolute; top: 0; left:0; bottom: 0; right: 0; margin: auto; }
4.子元素是行内元素或行内块元素,将父元素的text-align设为center以便让子元素水平居中,垂直居中的方法如下
方法1: 使用::after给容器增加一个高度为100%,content为空格的子元素,并将所有子元素的vertical-align设为middle(注意: 原本的子元素不能有高度)
.container{ height: 400px; width: 400px; text-align: center; } .container::after{ display: inline-block; height: 100%; content: ' '; vertical-align: middle; } .box{ display: inline-block; vertical-align: middle; }
- 方法2: 把父元素的display设为table-cell,并设置vertical-align:middle;
.container{ height: 400px; width: 400px; border: 1px solid gray; text-align: center; vertical-align: middle; display: table-cell; } .box{ display: inline-block; /*或inline*/ }
- 方法3: line-height方法:若父元素有固定高度,将子元素的line-height设置了跟父元素一样
.container{ height: 400px; width: 400px; border: 1px solid gray; text-align: center; display: table-cell; } .box{ line-height: 400px; }