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;}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。