资讯专栏INFORMATION COLUMN

水平垂直居中小结

xuxueli / 1478人阅读

摘要:相等的上下值三水平垂直居中绝对定位和负外边距使用绝对定位实现水平垂直居中时,元素的和应该等于对应的和值的一半再取负值。相对定位或绝对定位均可绝对定位和布局能实现居中效果的方法还有很多,这里列出来的方法只是一小部分,日后会慢慢补充。

  我们在页面布局中经常会遇到需要将内容水平/垂直居中的情况,现在我们就来梳理一下实现的方法。

一、水平居中

  1.行元素设置其父元素的text-align:center,适用于单行文本水平居中。
  2.块元素设置其本身的左右margin为auto即可,适用于设置了一定宽高值的块元素。
  3.使用flex

二、垂直居中

line-height

  使行元素垂直居中,可以设置行元素的line-height值,适用于单行文本垂直居中。
  若行元素所在的块级父元素有固定高度,则使行元素的line-height值与其父元素的高度相等;若行元素所在的父元素没有设置高度,则行元素设置的line-height值就是其父元素的高度。
  若要居中一张图片,可以设置图片的vertical-align:middle; 图片的父元素设置line-height值。

  2.table-cell

  通过如下设置可以实现元素的垂直居中。
  #parent {display: table;}//此元素会作为块级表格来显示(类似

),表格前后带有换行符。
  #child {
    display: table-cell;//此元素会作为一个表格单元格显示(类似

    vertical-align: middle;
  }

  3.使用绝对定位和负外边距

  使用绝对定位实现垂直居中时,元素的margin-top应该等于对应的top值的一半再取负值。
  #parent {position: relative;}
  #child {
    height: 30%;
    width: 50%;
    position: absolute;
    top: 50%;
    margin: -15% 0 0 0;
  }

  4.相等的上下padding值

  #parent {
    padding: 5% 0;
  }
  #child {
    padding: 10% 0;
  }

三、水平垂直居中

  1.绝对定位和负外边距

  使用绝对定位实现水平垂直居中时,元素的margin-top和margin-left应该等于对应的top和left值的一半再取负值。
  #parent {position: relative;}
  #child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
  }

  2.定位和transform

  transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。2D 转换方法,通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数,默认以元素的中心点为基点,x,y如果为负就反方向移动。这种方法类似于上一种使用负边距。
  #parent {position: relative;}
  #child {
    position: fixed;//相对定位或绝对定位均可
    width:500px;
    height:300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  3.绝对定位和margin:auto

  #parent {position: relative;}
  #child {
    width: 50%;
    height: 30%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

  4.flex布局
  div{
    display: flex;
    justify-content:center;
    align-items:Center;
  }

  能实现居中效果的方法还有很多,这里列出来的方法只是一小部分,日后会慢慢补充。

参考文章1:https://www.cnblogs.com/hutuz...
参考文章2:https://blog.csdn.net/liufeif...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113842.html

相关文章

  • 垂直水平居中方法小结

    摘要:前言最近看到很多面试题目会问请说出几种使用完成垂直水平居中的方法正好看基础的时候看到一篇文章是讲完全居中的,这边对于文章中的内容做个小结。具体代码如下使用完成垂直水平居中该方法的核心思想是使用表格来实现垂直居中,再使用来实现水平居中。 前言:最近看到很多面试题目会问:请说出几种使用css完成垂直水平居中的方法?正好看css基础的时候看到一篇文章是讲完全居中的,这边对于文章中的内容做个小...

    amuqiao 评论0 收藏0
  • 垂直水平居中方法小结

    摘要:前言最近看到很多面试题目会问请说出几种使用完成垂直水平居中的方法正好看基础的时候看到一篇文章是讲完全居中的,这边对于文章中的内容做个小结。具体代码如下使用完成垂直水平居中该方法的核心思想是使用表格来实现垂直居中,再使用来实现水平居中。 前言:最近看到很多面试题目会问:请说出几种使用css完成垂直水平居中的方法?正好看css基础的时候看到一篇文章是讲完全居中的,这边对于文章中的内容做个小...

    xcc3641 评论0 收藏0
  • 小结——居中问题的解决

    摘要:居中问题居中问题定位不管用水平居中需要做如下处理定位不管用,水平居中需要做如下处理定位管用水平居中需要做如下处理定位管用,水平居中需要做如下处理定位加元素已知宽度定位加元素已知宽度父元素设置为子元素设置为距上,据左,然后减去元素自居中问题: 1.Fixed定位margin:0 auto;不管用,水平居中需要做如下处理: position: fixed; top: 0; bottom: 0; ...

    darkbaby123 评论0 收藏0
  • CSS学习笔记-元素水平垂直居中

    摘要:前言布局中经常会遇到元素水平居中的需求今天根据以前的学习笔记以及看过的一些技术博客做个元素水平居中的小结。文字的水平垂直居中文字水平居中文字的水平垂直居中在于同高然后。 前言 布局中经常会遇到元素水平居中的需求,今天根据以前的学习笔记?以及看过的一些技术博客做个元素水平居中的小结。 正文 图片的水平垂直居中 //图片地址为http://static.jsbin.com/ima...

    NeverSayNever 评论0 收藏0
  • CSS 行内布局实践小结

    摘要:相关内联格式上下文主要影响内布局的行盒模型,这是一个显示区域,根据块状容器内,每一行的多个内联元素都会共同生成一个行盒模型。 前言 通常情况下,要使元素排列在一行内,通常做法就是使用float,然后再清浮动。 如下:showImg(https://segmentfault.com/img/bVmVua); 但是如果要使其垂直居中,则必须手动调整,蓝色或者绿色块的位置,比较繁琐。 ...

    Taste 评论0 收藏0

发表评论

0条评论

xuxueli

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<