css中有居中对齐方法？

显示全部楼层 · 2021-1-27 05:16:42

请高人总结一下，大家来学习。
分 -->

千问 · 2021-1-27 05:16:42

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

千问 · 2021-1-27 05:16:42

左右居中对齐可以定位加变换移动啊
/*第一种方式定位+margin
lefttop中的百分比相对于父级标签宽高的百分比
缺陷：图片必须知道图片的宽高
*/
/*#wrapimg{
width:200px;
height:300px;
position:absolute;*/
/*左上角居中*/
/*left:50%;
top:50%;*/
/*移动图片宽高的一半*/
/*margin-left:-100px;
margin-top:-150px;
}*/

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

千问 · 2021-1-27 05:16:42

关于居中，建议直接度娘，居中的方法百度能直接找齐

千问 · 2021-1-27 05:16:42

文本:
水平居中：text-align:center;
单行文本垂直居中：容器高度=line-height
盒子：
1.水平居中:margin:0auto;
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;

千问 · 2021-1-27 05:16:42

水平居中的方法有块状元素margin:0auto
行内元素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;（让行高与高度一致，即可让文字垂直居中）

千问 · 2021-1-27 05:16:42

https://www.cnblogs.com/dreamperson/p/9367008.html试试flax布局

千问 · 2021-1-27 05:16:42

vertical-align：middle
text-align：center

千问 · 2021-1-27 05:16:42

text-align：center