css实现垂直居中的各种方法
1、行内元素居中 line-height(须知高度)
.box{ height:300px; } p{ line-height:300px; }
2、table居中 display:table-cell;vertical-align:middle;
.box{ display:table; } p{ display: table-cell; vertical-align: middle; }
3、绝对定位,top+margin-top:-xxpx(须知高度)
.box{ position:relative; } p{ position:absolute; top:50%; margin-top:-50px; width:100px; height:100px; }
4、绝对定位 top+tranform
.box{ position:relative; } p{ position:absolute; top:50%; transform: translate(0,-50%); }
5、使用绝对定位 position left right bottom top margin:auto(须知高度)
.box{ position:relative; width:400px; height:400px; } p{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 100px; height: 100px; }
6、flex弹性盒模型 align-items:center
.box{ display: flex; align-items: center; }