文字和元素居中

文字和元素居中

1.文字居中

A.块元素

{ height: 50px;
line-height: 50px;
text-align: center; }

或

{ height: 500px;
background-color: #a0a0a0;
width: 500px;
display: flex;
justify-content: center;
align-items: center;}

B.行内块元素
内联元素用display: inline-block;改为行内块元素（也称之为内联块状元素）
line-height: 300px;

2.元素居中

A.最常用的定宽居中（针对于块元素）
给一个固定的宽度可以是具体的px，也可以是百分比然后
margin:0 auto;
(第一个参数为上下的margin值，左右margin为除去固定宽度后均分)
B.相对定位居中

position: relative;
left: 50%;
text-align: center;

C.绝对定位

position: absolute;
left: 50%;

D.弹性布局定位
注：父元素弹性布局

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

E.
居中

.center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}