水平居中
行内元素
如果父元素是块级元素,那么给父元素设置text-align:center
。
如果父元素不是块级元素,就先将父元素设置为块级元素,再给父元素设置text-align:center
。
块级元素
- 方案一
居中元素的宽度确定的情况下:需要给谁居中,就给谁设置margin:0 auto
。
居中元素的宽度不确定的情况下:默认子元素宽度与父元素的宽度是一致的,所以给子元素设置display
属性,将其转换成行内元素或行内块元素,再给父元素设置text-align:center
。
- 方案二
使用定位属性。父元素设置相对定位,子元素设置绝对定位,同时子元素设置left:50%;transform:translateX(-50%)
。
- 方案三
使用flex布局。父元素设置display:flex;justify-content:center
。
垂直居中
单行的行内元素
设置要居中元素的行高=父元素的高
。
多行的行内元素
设置要居中元素的display:inline-block
转换成行内块元素,然后设置vertical-align:middle;line-height:17px
设置对齐方式并且设置行高,否则会继承父级行高属性。再设置父级元素的line-height
等于其height
指。
块元素
- 方案一
使用定位属性。父元素设置相对定位,子元素设置绝对定位,同时子元素设置top:50%;transform:translateY(-50%)
。
- 方案二
使用flex布局。父元素设置display:flex;align-items:center
。
水平垂直居中
设置水平垂直居中可以结合上面讲到的方式,主要方法也是两种,定位和flex布局。
定位属性
子元素设置绝对定位,父元素设置相对定位。同时子元素设置top:50%;left:50%;transform:translate(-50%,-50%)
。
flex布局
父元素定义display:flex;justify-content:center;align-items:center;
浮动
为什么会出现浮动
浮动的初衷,是为了实现类似word里的文字环绕图片的效果。普通文档流,因为从上到下,从左到右,规定的太死了,每个元素都被限制了位置。所以才引入了浮动,形成丰富的页面效果。定位的引入,更加增强了,页面布局的可能。
浮动的规则
浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
浮动引发的问题
- 父元素的高度无法被撑开,也就是父元素高度塌陷,会影响与父元素同级的元素布局。
- 浮动元素左浮动,其同级的非浮动元素会跟随其后。
- 如果浮动元素不是容器内的第一个元素,则该元素之前的元素也需要浮动,否则会影响容器内元素的布局。
如何清除浮动
- 方法一:额外标签法
在容器内,最后一个浮动元素后面添加一个空div,并将其设置clear:both
属性,清除浮动,这样父级div就可以获取高度。
- 方法二:构建BFC
为父级容器设置overflow:hidden
构建BFC,这样依据BFC渲染规则,BFC容器的高度会计算浮动元素。同时要设置zoom:1
兼容IE6。注意,overflow是对溢出元素的设置,使用的时候要谨慎,视情况而定。
- 方法三:定义伪类+zoom
此方法原理类似方法一,通过为父级元素定义伪类清除浮动,同时需要设置zoom:1
兼容IE6。
.clearfix:after{
content:""; //父元素结尾放一个空白符
height:0; //让这个空白字符不显示出来
display:block;
clear:both; //确保这个空白字符是非浮动的独立块
}
.clearfix{
zoom:1; //兼容IE6
}
clear属性的作用是确保当前元素的左右两侧不会有浮动元素。clear只对元素本身的布局起作用。取值:left、right、both。
总结
大概梳理总结了几种设置元素垂直居中的方法以及浮动问题。如有错漏,欢迎指正讨论!!!