常用布局方式汇总-居中布局

时间：2023-04-02 12:34:48 HTML

常用布局方式汇总水平居中布局(1)width:(xxx)px;保证金：0自动；使用场景：整体页面水平居中，有特定的宽度要求。

.content{width:1000px;高度：100px；背景：红色；margin:0auto;}(2)text-align:center;显示：内联块；使用场景：子元素有多个，需要横向居中排列

.wrap{text-align:center;}。内容{显示：内联块；宽度：100px；高度：100px；background:red;}(3)absolute+left:50%+margin-left:-width/2使用场景：子元素宽度确定，子元素互不影响马上要过年了，马上要过年了，马上要过年了，马上要过年了，马上要过年了.wrap{position:相对；}.content{位置：绝对；左：50%；宽度：200px；高度：100px；左边距：-100px；background:red;}(4)absolute+left:50%+translateX(-50%)使用场景：子元素宽度不确定，支持css3的translate属性,子元素互不影响年快到了.wrap{position:relative;}.content{position:absolute;左：50%；高度：100px；背景：红色；transform:translateX(-50%);}(5)flex布局使用场景：支持flex布局的浏览器都可以使用这种布局，它结合了（2）和（4）的优点，无需考虑子元素的宽度，并支持多个子元素居中新年快到了新年快到年快到了.wrap{display:flex;证明内容：居中；}.content{高度：100px；background:red;}相对于水平居中布局，垂直居中布局有点取巧，实现方式不灵活(1)table-cell布局使用场景：多行文字上下居中春节.wrap{display:表格单元格；垂直对齐：中间；高度：200px;}.content{宽度：100px;background:red;}(2)absolute+top:50%+margin-top:-height/2使用场景：同水平居中，适用于子元素高度确定后垂直居中，不影响其他子元素。因为是绝对定位，父元素需要占空间，如果没有其他子元素，需要设置一个height.wrap{position:relative;高度：200px;}.content{位置：绝对;顶部：50%；宽度：300px；高度：100px；边距顶部：-50px；background:red;}(3)absolute+top:50%+translateY(-50%)使用场景：同水平居中，适用于高度不确定的子元素，不会影响其他子元素。居中，因为是绝对定位，父元素需要占空间。如果没有其他子元素，则需要设置高度。换行{位置：相对；高度：200px;}.content{位置：绝对;顶部：50%；背景：红色；transform:translateY(-50%);}(4)flex布局使用场景：支持flex布局的浏览器都可以使用这种布局，不需要考虑子元素的高度，容易写马上要过年了，马上要过年了，马上要过年了，马上要过年了，马上要过年了.wrap{d显示：弹性；对齐项目：居中；高度：200px;}.content{背景：红色;}

上一篇：前端面试日常3+1——Day963

下一篇：float和absoluteoutofthedocumentflow的区别

常用布局方式汇总-居中布局相关文章