1.行内元素(如span、img、a)
text-align:center;
2.具有高度的块级元素(div、p)
margin:0 auto;
3.flex布局
justify-content: center;/* 水平居中*/
align-items: center;/* 垂直居中*/
4.定位(要知道元素的宽高)
position: absolute; /* fixed同理 */
margin-left:-100px ;
margin-top: -100px; /* 需根据宽高计算偏移量 */
5.定位(margin: auto;)
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
6.jquery
$(function(){
$(window).resize(function() {
$('#box).css({
position: 'absolute',
left: ($(window).width() - $('#box').outerWidth())/2,
top: ($(window).height() - $('#box').outerHeight())/2
});
});
})
7.calc+定位
div {
border:1px solid red;
width: 200px;
height: 200px;
position: relative;
}
div span {
width: 100px;
height: 100px;
background: #ddd;
position: absolute;
top: calc(50% - (100px / 2));
left: calc(50% - (100px / 2));
}
8.transform:translate(x,y)+定位
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
9.table-cell(表格单元格)
display: table-cell;
text-align: center;
vertical-align: middle;
欢迎补充,一起进步。