1.position+transform
position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
2.flex
display: flex; align-items: center; justify-content: center;
3.table-cell
<div class="pagination"> <p>多行居中</p> </div> <style> .pagination { position: relative; 200px; height:200px; border:1px solid red; display: table; } .pagination p{ display: table-cell; text-align: center; vertical-align: middle; } </style>
4.absolute+margin
position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;
如:
<div class="pagination"> <p>不等高度的居中不等高度的居中不等高度的居中不等高</p> </div> <style> html,body{100%;height:100} .pagination { 200px; height:200px; border:1px solid red; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .pagination p{ display: table-cell; text-align: center; vertical-align: middle; } </style>
5.浮动方案 absolute + relative 扩展性强,兼容性强;
<div class="pagination"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <style> .pagination { position: relative; } .pagination ul { position: absolute; left: 50%; } .pagination li { float: left; position: relative;/*注意,这里不能是absolute*/ right: 50%; } </style>