請高人總結一下，大家來學習。
uj5u.com熱心網友回復：
常用的text-align:center、margin:0 auto、justify-content:center或者就是定位position實作
uj5u.com熱心網友回復：
左右居中對齊可以定位加變換移動啊/* 第一種方式 定位+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%);
} */
uj5u.com熱心網友回復：
關于居中，建議直接度娘，居中的方法百度能直接找齊uj5u.com熱心網友回復：
文本:水平居中：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;
uj5u.com熱心網友回復：
水平居中的方法有 塊狀元素 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;（讓行高與高度一致，即可讓文字垂直居中）
uj5u.com熱心網友回復：
https://www.cnblogs.com/dreamperson/p/9367008.html 試試flax布局uj5u.com熱心網友回復：
vertical-align：middletext-align：center
uj5u.com熱心網友回復：
text-align：centeruj5u.com熱心網友回復：
對于文本的話，text-align:center、對于容器的話，可以用外邊距，margin：0 auto；
容器得話也可以直接用絕對定位，position：absolutel;
top:50%；
left：50%；
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/38941.html
標籤：HTML(CSS)