第4题：水平垂直居中的方式能说出哪些?

[z1291231323]

可以使用 0 auto

[z1291231323]

display: flex; align-items: center; // 纵轴对齐方式，默认是纵轴 子元素垂直居中 justify-content: center; //纵轴对齐方式，默认是纵轴

[Wise-m]

table布局 flex布局 grid布局 使用绝对定位和margin负值 绝对定位和transform 绝对定位+left/right/bottom/top +margin😀

[rupoly]

1. flex布局，justify-content：center，align-items：center
2. absolute，负margin
3. absolute，top/left/right/bottom margin:auto
4. absolute，transform:translate(-50%,-50%)
5. absolute,calc
6. grid

[Moooodena]

1：display: flex; justify-content: center; align-items: center; 2：子绝父相，父元素就不写了；position : absolute；top: 50%; left : 50%; margin-top: -50%; margin-left: -50%; 3：position : absolute；top: 50%; left : 50%; transform : translate(-50%, -50%); 4：子绝父相，父元素就不写了；position : absolute; top: 0;bottom: 0; left : 0;right : 0; margin: auto; 5：子绝父相，父元素就不写了；position: absolute; top: calc(50% - 50px); left: calc(50% - 50px); 6：grid布局；父级设置display : grid;子级设置：align-self: center; justify-self: center;

[BlueSky-Engineer]

1. absolute加margin方案
2. fixed 加 margin 方案
3. display:table 方案
4. 行内元素line-height方案
5. flex 弹性布局方案

[Sophora77]

行内元素的话，可以直接设置text-align:center 、line-height 块级元素的话，可以用 flex 、 grid 、table-cell 、absolute + transform 以上这些是不需要知道宽高的。 还有absolute + margin: auto 、 absolute + 负margin 、absolute + calc 这些是需要知道宽高的

[lemon-912]

1:flex :父元素设置display:flex ; justify-conten:center;align-items:center;
2:子绝父相定位 再给子元素设置：top:50%;left:50%;margin-top:-50%;margin-left:-50%;
3:子绝父相定位 再给子元素设置：top：0；let:0; bottom:0; right:0; margin：auto;
4:子绝父相定位 再给子元素设置：top:50%;left:50%;transform:translate(-50%,-50%);
5:grid布局:父级设置display : grid;子级设置：align-self: center; justify-self: center;

[DengZhaoQuan]

1. absolute + top/left 50% + 负margin
2. absolute + top/left 50% + transform: translate(-50%, -50%)
3. absolute + top/left/right/bottom 0 + margin: auto
4. display: flex + justify-content: center + align-items: center
5. absolute + calc()
6. grid

[xcop32221]

一、基于定位实现 1.absolute+负margin 2.absolute+transform 3.absolute+inset 0 +margin auto 4.ablsolute+calc()

二、基于布局实现 1.display:flex 2.display:grid 3.display:table-cell

三、inline元素实现居中 1.lineheight+text-align:center

[WLNCJL]

1. 定位（子绝父相）top/left : 50%（父盒子的一半） + margin-top/margin-left 负自身的一半（子盒子）
2. 定位（子绝父相）top/left : 50%（父盒子的一半） + transform:translate（-50%，-50%）
3. 定位（子绝父相）top/left/bottom/right : 0 + margin: auto
4. 父盒子设置display:flex; justify-content: center; align-items: center
5. 父盒子设置display:grid; 子盒子设置 justify-self: center; align-self: center

[MissTann]

1、flex
<div class="father">
  <div class="child"></div>
</div>

dispay : flex                                                 给father盒子设置
justify-content : center                               给child
align-items: center                                    
2、
dispay : flex                                                 给father盒子设置
margin: auto                                                给child
3、子绝父相
position: relative                                          给father盒子设置
position: absolute                                        给child
left: 50%
top: 50%
transform: translate(-50%, -50%)
4、上下左右挤

5、
/* display: grid;  */或者 display: inline-grid;     
place-items: center                                          
给father盒子设置（grid翻译：格子），设置了display: grid（或inline-grid）就会创建Grid容器和Grid项目，也会自动生成网格线，即行和列（默认为一行一列）。
place-items: center     放置的居中

[chenjiefe]

仅居中元素定宽高适用

• absolute + 负margin
• absolute + margin auto
• absolute + calc

居中元素不定宽高

• absolute + transform
• lineheight
• writing-mode
• table
• css-table
• flex
• grid

[stevenhuanghr]

1.子绝父相，子元素设置top,left值为50%，margin-top,margin-left值为负的子元素宽高的一半。 2.子绝父相，子元素设置top,left,botton,right为0,margin为auto。 3.子绝父相，子元素设置top,left值为50%，tranform为translate(-50%，-50%）。 4.父元素设置display：flex,justify-content:center,align-items:center

[z-forever-y]

1. diplay flex: justify-content:center    align-items:center
2. 子绝父相，子元素设置left,top:50%,50%      transfrom:translate(-50%,-50%)
3. 子绝父相，子元素设置left,top:50%,50%      margin-left , margin-top : 子元素自身宽高的一半
4. 子绝父相，子元素设置 top,right,bottom,left 为0 ，margin:auto
5. display:grid

[Qian-e]

margin: auto position：absolute/left/right/bottom/top+margin flex布局 grid布局 table布局 transform

[dewallure]

不固定宽高适用： 1. flex布局 parent: display: flex; justify-content: center; align-items: center 2. grid布局 parent: display: grid; justify-content: center; align-items: center 3. 子绝父相 + margin:auto parent: position: relative; child: position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; 4. 子绝父相 + transform-translate parent: position: relative; child: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

固定宽高适用： 1. 子绝父相 + calc计算 parent: position: relative; child: position: absolute; top: calc(50%-child一半高度); left: calc(50%-child一半宽度); 2. 子绝父相 + margin负值 parent: position: relative; child: position: absolute; top: 50%; left: 50%; margin-top: -child一半高度; margin-left: -child一半宽度;

不固定宽高适用，但vertical-align受字体影响，有可能非绝对居中： 1. table布局 parent: display: table-cell; vertical-align: middle; text-align: center; child: display: inline-block; 2. inline-block parent: line-height: parent高度 text-align: center; child: display: inline-block; vertical-align: middle;

实在不行还能硬算手动

[Cremei]

分类
行内元素	类似于文本元素居中	父元素设置text-align: center;line-height: 300px;
块级元素
1.flex布局	纯flex布局	父元素 display: flex; justify-content: center; align-items: center;
flex + margin: auto;	父盒子 display: flex; 子盒子 margin: auto;
2.定位解决	子绝父相 + top + left	子盒子 top 和 left 设置为 =（父盒子 - 子盒子宽高）50%
子绝父相 + top + left + transform	子盒子top = left = 50% ; transform的translate属性设置为-50%
子绝父相 + 四个属性为0 + margin: auto;	子盒子top = right = bottom = left = 0 + margin: auto;自适应
子绝 + margin	margin-top = margin-left = (父盒子宽高 - 子盒子宽高)50%
子绝父相 + calc()	calc(50% - Xpx) ； X = 子盒子宽高 * 50%
子绝父相	父元素就不写了；position : absolute；top: 50%; left : 50%; margin-top: -50%; margin-left: -50%;
3.grid布局	display: grid;	父级设置display : grid;子级设置：align-self: center; justify-self: center;
display: table-cell;	父盒子 display: table-cell; vertical-align: middle; text-align: center; 子盒子：display: inline-block;