【CSS】元素居中的几种方式

基本方式

方式	描述
左右居中	margin: auto;
绝对居中	position: absolute; top: 0;bottom: 0;left: 0;right: 0; margin: auto;
文本居中	text-align:center;
定位居中	position: absolute; top: 50%; left: 50%; /* 定位居中 减自身的一半 margin-left: -100px margin-top: -50px; */ transform: translate(-100px,-50px);
弹性居中	display：flex;(flex布局) justify-content: center;(左右居中) align-items: center;(上下居中)

左右居中

margin: auto;

绝对居中

position: absolute;  
top: 0;
bottom: 0;
left: 0;
right: 0;  
margin: auto;

文本居中

text-align:center;

定位居中

position: absolute;
top: 50%;
left: 50%;
/* 定位居中 减自身的一半 */
transform: translate(-100px,-50px)

弹性居中

display：flex;
justify-content: center;
align-items: center;