1. 水平居中
公共代碼:
html:
<div class="parent"> parent <br> <div class="child"> child </div></div>
css:
html, body { margin: 0; width: 100%; height: 100%; .parent { width: 100%; height: 100%; background: #fac3fa; .child { width: 50%; height: 50%; background: #fe9d38; } }}方案一: text-align(父) + inline-block(子)
代碼:
css:
.parent { text-align: center; .child { display: inline-block; }}方案二: 塊級元素 + margin: 0 auto;
.child { display: block; // 非塊級元素時設置 margin: 0 auto;}方案三: absolute + transform
.parent { position: absolute; left: 50%; transform: translateX(-50%);}方案四: flex
注: 由于使用flex的關系, 這里去掉了 parent 和<br>
.parent { display: flex; justify-content: center;}2. 垂直居中
公共代碼:
html:
<div class="parent"> <div class="child"></div></div>
css:
html, body { margin: 0; width: 100%; height: 100%;}.parent { display: table-cell; width: 800px; height: 500px; background: #fac3fa; .child { width: 50%; height: 50%; background: #fe9d38; }}方案一: table-cell(父) + vertical-align(子)
.parent { display: table-cell; vertical-align: middle;}方案二: absolute + transform
.parent { position: relative; .child { position: absolute; top: 50%; transform: translateY(-50%); }}方案三: flex
.parent { display: flex; align-items: center;}3. 水平垂直居中
公共代碼同[垂直居中]
常用方案一: absolute + transform
.parent { position: relative; .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }}常用方案二: flex
.parent { display: flex; align-items: center; justify-content: center;}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
