详解 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系列(二):为什么height:100%不生效? css3
2019-5-16
-
16种方法实现水平居中垂直居中 css3
2017-5-11
-
css中的层叠性及权重的比较 css3
2019-10-11
-
CSS布局十八般武艺都在这里了 css3
2019-3-8
-
Array() 方法汇总 css3
2019-5-25
-
Grid布局简介 css3
2019-5-18
-
史上最全面、最透彻的BFC原理剖析 css3
2017-12-11
-
近阶段前端面试问题汇总(css篇) css3
2019-6-22
-
viewport与移动端布局 css3
2019-8-21
-
px、pt、em、rem 的区别 css3
2019-8-15