[已解决]css中有居中对齐方法？

胖二

请大家总结一下，好学习。

最佳答案

吴钢

2021-4-6 17:48:40

文本:
水平居中：text-align:center;
单行文本垂直居中：容器高度=line-height
盒子：
1.水平居中: margin: 0 auto;
2.父元素：position:relative;
子元素：position: absolute;top:50%;left:50%;margin-left: -(子元素宽度/2);margin-top: -(子元素高度/2);
3.父元素：position:relative;
子元素：position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);
4.父元素：display:flex;justify-content:center;align-items:center;

跳转到最佳答案楼层

本帖寻求最佳方案

，目前已有 5 个回复 我要奖励

今晚法甲最后几场

常用的text-align:center、margin:0 auto、justify-content:center
或者就是定位position实现

黃叡

左右居中对齐可以定位加变换移动啊
/* 第一种方式   定位+margin
left top中的百分比相对于父级标签宽高的百分比
缺陷：图片必须知道图片的宽高

*/
/*  #wrap img{
width: 200px;
height: 300px;
position: absolute; */
/* 左上角居中 */
/*  left: 50%;
top: 50%; */
/* 移动图片宽高的一半 */
/*  margin-left: -100px;
margin-top: -150px;
} */


/* 第二种方式：定位加移动
移动两个值，x轴的平移大小，y轴的平移大小 如果使用百分比，相对于标签的宽高而言
*/
/*  #wrap img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
} */

吴钢

文本:
水平居中：text-align:center;
单行文本垂直居中：容器高度=line-height
盒子：
1.水平居中: margin: 0 auto;
2.父元素：position:relative;
子元素：position: absolute;top:50%;left:50%;margin-left: -(子元素宽度/2);margin-top: -(子元素高度/2);
3.父元素：position:relative;
子元素：position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);
4.父元素：display:flex;justify-content:center;align-items:center;

吴大超

水平居中的方法有 块状元素  margin:0 auto
                             行内元素  text-align:center
垂直水平居中的方法  
            1.块元素方法一：  用absolute定位，此时需要给其父元素添加position：relative；定位后设置top,left为50%，再把margin-top，margin-left的值设置成元素自身宽度的一半。（适用于已知宽高的元素）
            2. 块元素方法二：  用absolute定位，此时需要给其父元素添加position：relative；定位后设置top:0; bottom:0; left:0; right:0; margin:auto; （未知宽高的元素也适用）
           3.块元素方法三：   用absolute定位，此时需要给其父元素添加position：relative；定位后设置top：50%; left:50% ; transform:translate(-50%,-50%) ; （未知宽高的元素也适 用）
            4.行元素  text-align:center； height：50px;   line-height:50px;（让行高与高度一致，即可让文字垂直居中）

叶斌

vertical-align：middle
text-align：center