CSS使元素水平垂直居中

时间 2021-03-14

标签布局 flex code orm table form transform margin 栏目 CSS 繁體版

原文原文链接

1.使用弹性布局布局

// 父元素设置
display: flex;
justify-content: center;
align-items: center;

2.position绝对定位flex

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

3.使用position定位和translate变换code

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

4.知道元素宽高，使用position定位和calc()orm

width: 100px;
height: 100px;
position: absolute;
left: calc(50% - 50px);
top: calc(50% - 50px);

5.知道元素宽高，使用position定位it

width: 100px;
height: 100px;
position: aboslute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;

6.行内元素水平垂直居中，使用display:table-cell和vertical-align:middleio

// 父元素设置
display: table-cell;
vertical-align: middle;

7.文字水平垂直居中table

text-alignn: center;
line-height: 父元素高度