详解 CSS 居中布局技巧
水平居中元素
方式一:CSS3 transform
.parent { position: relative; } .child { position: absolute; left: 50%: transform: translateX(-50%); }
方式二:flex 布局
.parent { display: flex; justify-content: center; }
适用于子元素为浮动,绝对定位,内联元素,均可水平居中。
居中的元素为常规文档流中的内联元素(display: inline)
常见的内联元素有:span, a, img, input, label 等等
.parent { text-align: center; }
居中的元素为常规文档流中的块元素(display: block)
常见的块元素:div, h1~h6, table, p, ul, li 等等
方式一:设置 margin
.parent { width: 100%; } .child { width: 600px; height: 50px; margin: 0 auto; background: #999; }
方式二:修改为 inline-block 属性
.parent { text-align: center; } .child { display: inline-block; } .child { width: 100px; float: left; position: relative; left: 50%; margin-left: -50px; }
方式一:
.parent { position: relative; } .child { position: absolute; width: 100px; left: 50%; margin-left: -50px; }
方式二:
.parent { position: relative; } .child { position: absolute; width: 100px; left: 0; right: 0; margin: 0 auto; }
垂直居中元素
方式一:CSS3 transform
.parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }
方式二:flex 布局
.parent { display: flex; align-items: center; }
适用于子元素为浮动,绝对定位,内联元素,均可垂直居中。
.text { line-height: 200px; height: 200px; }
方式一:
.parent { position: relative; } .child{ position: absolute; top: 50%; height: 100px; margin-top: -50px; }
方式二:
.parent { position: relative; } .child{ position: absolute; top: 0; bottom: 0; height: 100px; margin: auto 0; }
垂直居中元素
div { width: 100px; height: 100px; margin: auto; position: fixed; //absolute is ok top: 0; right: 0; bottom: 0; left: 0; }
优点:
1.不仅可以实现在正中间,还可以在正左方,正右方
2.元素的宽高支持百分比 % 属性值和 min-/max- 属性
3.可以封装为一个公共类,可做弹出层
4.浏览器支持性好
.child { width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; }
特点:
1.良好的跨浏览器特性,兼容 IE6 – IE7
2.灵活性差,不能自适应,宽高不支持百分比尺寸和 min-/max- 属性
.child { width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
特点:
1.内容可自适应,可以封装为一个公共类,可做弹出层
2.可能干扰其他 transform 效果
.parent { display: flex; justify-content: center; align-items: center; }
这是 CSS 布局未来的趋势。Flexbox 是 CSS3 新增属性,设计初衷是为了解决像垂直居中这样的常见布局问题。
text { height: 100px; line-height: 100px; text-align: center; }
相关推荐
-
CSS 属性选择器的深入挖掘 css3
2019-6-22
-
CSS Grid网格布局全攻略 css3
2019-10-8
-
10个顶级的CSS3代码生成器 css3
2019-8-21
-
CSS 代码质量校验:stylelint 、stylefmt 及 post-sorting 的开发环境配置参考 css3
2019-5-9
-
自适应宽度元素单行文本省略用法探究 css3
2019-9-9
-
html/css实现聊天布局 css3
2019-8-21
-
CSS 潜藏着的BFC css3
2017-12-18
-
10 分钟理解 BFC 原理 css3
2019-3-8
-
用CSS的border画三角形 css3
2019-10-11
-
css选择class中的第一个怎么选?使用first-of-type? css3
2019-1-3