search

CONNLY-J / cultivate

0 stars 0 forks source link

如何实现居中对齐？ #22

Open goldEli opened 4 years ago

goldEli commented 4 years ago

写出你知道的所有方式

CONNLY-J commented 4 years ago

水平居中： 1、如果元素为行内元素，设置text-align：center 2、如果元素宽度固定，设置margin：0 auto 3、如果元素为绝对定位，可设置父元素position为relative，元素设置left:0;right:0,margin:auto 4、flex：display：flex;justify-content：center 垂直居中: 1、内联元素（文本）：line-height=height 2、flex布局：display：flex; align-item：center 3、固定宽高的块级元素：top:50%，margin-top为高度负值的一半 水平垂直居中： 1、固定宽高元素：.content{400px; height: 200px; position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -200px; } 2、flex布局：.parent { display: flex; justify-content: center; align-items: center; } 3、grid布局：.parent { height: 140px; display: grid; }