CSS:居中和浮动

75 阅读3分钟
水平居中
行内元素

如果父元素是块级元素,那么给父元素设置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。

总结

大概梳理总结了几种设置元素垂直居中的方法以及浮动问题。如有错漏,欢迎指正讨论!!!