生活随笔
收集整理的這篇文章主要介紹了
css居中方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
行內元素
1、水平居中
<div class="parent"><span class="child">content</span>
</div>
.parent{background-color:red;text-align:center;
}
- fit-content; .parent{background-color:red;width:fit-content;
}
2、垂直居中
.parent{height:200px;line-height:200px;background-color:red;
}
塊級元素
1、水平居中
<div class="parent"><div class="child"></div>
</div>
.parent{background-color:red;
}
.child{width:100px;margin:0 auto;background-color:blue;
}
2、水平垂直居中
.parent{position:relative;height:200px;background-color:red;
}
.child{weight:100px;height:100px;position:absolute;background:blue;left:calc(50%-50px);top:calc(50%-50px);
}
?
.parent{position:relative;height:200px;background-color:red;
}
.child{weight:100px;height:100px;position:absolute;background:blue;left:50%;top:50%;margin-top:-50px;margin-left:-50px;
}
.parent{position:relative;height:200px;background-color:red;
}
.child{position:absolute;background:blue;left:50%;top:50%;transform:translate(-50%,-50%);
}
.parent{position:relative;height:200px;background-color:red;
}
.child{width:100px;height:100px;position:absolute;left:0;right:0;top:0;botttom:0;margin:auto;background:blue;
}
.parent{padding:20px;background-color:red;
}
.child{height:200px;background:blue;
}
.parent{height:200px;display:flex;align-items:center; //垂直居中justify-content:center; //水平居中background-color:red;
}
.child{width:100px;height:100px;background-color:blue;
}
.parent{height:200px;text-align:center;background-color:red;
}
.child{width:100px;height:100px;display:inline-block;vertical-align:middle;background-color:blue;
}
.parent::before{content:"";width:20px;height:200px;display:inline-block;vertical-align:middle;background-color:yellow;
}
- calc（寬高相等） .parent{width:600px;height:600px;background-color:red;
}
.child{width:100px;height:100px;padding:calc((100%-100px)/2);background-clip:content-box;background-color:blue;
}
?
?
總結
以上是生活随笔為你收集整理的css居中方法的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
