水平居中
【行内元素】适用inline,inline-block,inline-table,inline-flex元素
.center { text-align: center; }
【块级元素】适用于block level元素
①一个块级元素
.center { margin: 0 auto; }
②多个块级元素
方法一:将块级元素变为行内块级元素 html部分: <main class="inline-block-center"> <div>1</div> <div>2</div> <div>3</div> </main> css部分: .inline-block-center { text-align: center; } .inline-block-center div { display: inline-block; text-align: left; } 方法二:flex布局 html部分: <main class="flex-center"> <div>1</div> <div>2</div> <div>3</div> </main> css部分: .flex-center{ display:flex; justify-content:center; }
垂直居中
【行内元素】
①单个行内元素:
情况一:当link或文本有包裹元素时,设置相等的上下padding
.link { padding-top: 30px; padding-bottom: 30px; }
情况二:当link或文本没有包裹时,设置行高和高度相等
.center-text-trick { height: 100px; line-height: 100px }
②多个行内元素:
方法一:将多个行内元素分别置于table-cell中 html部分: <table> <tr> <td> 1 </td> </tr> </table> css部分: table td { background: black; color: white; padding: 20px; border: 10px solid white; /* default is vertical-align: middle; */ } 方法二:将父元素设置为display:table,将自身设置为display:table-cell html部分: <div class="center-table"> <p>1</p> </div> css部分: .center-table { display: table; height: 250px; width: 240px; } .center-table p { display: table-cell; vertical-align: middle; } 方法三:使用felex html部分: <div class="flex-center"> <p>1</p> </div> css部分: .flex-center{ display: flex; justify-content: center; flex-direction: column; height: 400px;/*父容器必须有固定高度*/ } 方法四:当以上代码均不可用时,可尝试此奇淫巧技 html部分: <div class="ghost-center"> <p>1</p> </div> css部分: .ghost-center { position: relative; } .ghost-center::before { content: " "; display: inline-block; height: 100%; width: 1%; vertical-align: middle; } .ghost-center p { display: inline-block; vertical-align: middle; }
【块级元素】
①已知元素高度(绝对定位+负的margin)
.parent { position: relative; } .child { position: absolute; top: 50%; height: 100px; margin-top: -50px; /* 为元素高度的一半,没有box-sizing时,为height+padding+border的一半*/ }
②不知元素高度(与上一方法,大同小异)
.parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }
③flex布局
.parent { display: flex; flex-direction: column; justify-content: center; }
水平垂直均居中
①有固定宽高的元素
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;/* 注意此处为height+padding+的一半*/
}
②没有固定宽高的元素(同之前没有固定宽高元素一样,用transform解决)
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
③使用flexbox布局
.parent {
display: flex;
justify-content: center;
align-items: center;
}
以上的居中大法,基本可以满足日常需求啦,倘若有所错误,欢迎指正啦~