欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS水平和垂直居中技术

程序员文章站 2022-05-01 23:27:44
...

水平居中

行内元素的水平居中

  1. text-align:center(在父元素中设置)
  • 只对内联元素或行内块元素有效
  • 需要放置于父元素中

块级元素的水平居中

  1. margin: 0 auto;

垂直居中

行内元素的垂直居中

  1. line-height: 父元素的高度;(在父元素中设置)
  • 只对内联元素或行内块元素有效
  • 需要知道父元素的高度
  • 需要放置于父元素中
  • 适用于垂直方向上只有一个需要居中的元素的情况(想同时垂直居中多个元素时,可以用padding)
  1. vertical-align: middle;(用于垂直对齐inline元素)
  • 只对内联元素或行内块元素有效
  • 主要用在文本和与文本相邻元素的垂直方向上的对齐问题(主要是对齐的作用,而不是居中的作用),

例如将一个icon与文字对齐。

水平垂直居中

浮动元素

  1. 使用position:relative;

具体方法与绝对定位的第1个和第2个方法类似,只不过把absolute改为relative,并根据原float的方向稍作修改即可。

  • 相对定位relative可以和float叠加,在float后的位置上再相对定位。
  • 缺点就是float元素居中后仍会占据原来的位置。
  • 第二种方式中,如果设定了浮动元素的高度,将会影响transform的具体值。

绝对定位元素

  1. 使用50%推进法则

    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -该元素自身宽度的一半px;      /*水平居中*/
    margin-top: -该元素自身高度的一半px;      /*垂直居中*/
  • 只对绝对定位的元素有效
  • 需要知道绝对定位元素的宽高
  • 兼容性很好,是一种主流用法
  1. 第一种方法的改进版,使用transform代替margin

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);  /*水平垂直居中*/
  • 不需要知道绝对定位元素的宽高。(如果设置了高度,则有可能影响到transform的具体值)
  • 兼容性一般,IE10+以及其他现代浏览器支持
  1. 使用margin:auto;

    position: absolute;
    left: 0;
    right: 0;           /*水平居中*/
    top: 0;
    bottom: 0;          /*垂直居中*/
    margin: auto;

flex居中方式

display: flex;
justify-content: center;  /*水平居中*/
align-items: center;      /*垂直居中*/
  • 块级元素设置display: flex;,内联元素设置display: inline-flex;

需要注意的几个问题

  1. 元素浮动后仍可以设置margin属性,但auto不会起作用。
  2. 图片居中的问题
  • 注意:如果图片的宽度大于父元素的宽度, 不能使用margin: 0 auto;或者text-align: center;让图片居中
  • 如果图片的宽度大于父元素的宽度, 可以绝对定位中的居中方式让图片居中。但是定位流的弊端也比较明显。它必须知道图片宽度。
  • 如果图片的宽度大于父元素的宽度, 也可以使用margin: 0 -100%;

(注意: 父元素必须设置text-align: center;