css元素居中方法

calx 发布于2019-08-29 16:38 / 540人阅读

摘要：写在前面很多时候我们需要水平居中时候用但我们要知道，这个方法有很大的局限性，它不能对浮动元素和绝对定位元素居中，而且对于其他元素必须在有属性时才有作用。

写在前面：很多时候我们需要水平居中时候用margin: 0 auto;但我们要知道，这个方法有很大的局限性，它不能对浮动元素和绝对定位元素居中，而且对于其他元素必须在有width属性时才有作用。

这里说的居中是水平竖直同时居中，就像下面图中这样，而且我们居中的时元素而不是内容。(以下所有方法的结果和下图一样，不再附图)

以下方法如果没有特殊说明，都是基于下面这个部分：


#parent{
  height: 200px;
  width: 300px;
  border: 1px solid #000;
}
#demo{
  height: 100px;
  width: 60px;
  background: blue;
}

行内元素居中（单行）


#parent{
  text-align: center;
}
#demo{
  display: inline-block;
  line-height: 200px;   /*   等于父元素高度   */
}


  Hello

这里应注意，text-align在IE8及以上和其他主流浏览器只能对行内元素居中，但在IE6和IE7中可以对任何元素居中。

利用position定位 知道子元素和父元素大小

方法一

 #parent{
    position: relative;
}
#demo{
  position: absolute;
  top: 50px;  /*    计算方法: （父元素高度-子元素高度)/2    */
  left:120px;   /*    计算方法: （父元素宽度-子元素宽度)/2    */
}

方法二

#parent{
  position: relative;
}
#demo{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

仅知道子元素大小

#parent{
  position: relative;
}
#demo{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;  /*   子元素高度的一半   */
  margin-left: -30px;  /*   子元素宽度的一半   */
}

仅知道父元素大小

#parent{
  position: relative;
}
#demo{
  position: absolute;
  top: 100px;  /*   父元素高度的一半   */
  left: 150px;   /*   父元素高度的一半   */
  transform: translateX(-50%) translateY(-50%);
}

父元素和子元素大小都不知道

#parent{
  position: relative;
}
#demo{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

利用table居中



#parent{
  text-align: center;
}
#demo{
  display: inline-block;
}

利用display居中 display:table-cell

#parent{
  display:table-cell;
  text-align: center;
  vertical-align: middle;
}
#demo{
  display: inline-block;
}

display:flex

#parent{
  justify-content:center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

还有一种用font-size属性的居中对齐方式，由于只能在IE6，IE7中实现。这里就把它忽略了。

GPU云服务器云服务器 html居中浮动元素 html居中css css元素 java插入元素方法

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

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

CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

cc17 2019-08-02 10:11 评论0 收藏0
CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

AlienZHOU 2019-08-30 15:53 评论0 收藏0
CSS之各种居中

摘要：前言在我看来，入门的路上最烦人的就是的各种居中了。在我初学过程中，居中这个问题经常困扰到我。使用伪元素垂直居中这种方法的前提是要是行内元素才能进行居中。结语以上的方法基本上可以用完成各种情况的居中。前言在我看来，入门CSS的路上最烦人的就是CSS的各种居中了。在我初学CSS过程中，居中这个问题经常困扰到我。那为什么CSS的居中这么烦人呢？我认为，这是因为CSS的居中方法以及它的适...

Labradors 2019-08-02 16:01 评论0 收藏0
CSS之各种居中

摘要：前言在我看来，入门的路上最烦人的就是的各种居中了。在我初学过程中，居中这个问题经常困扰到我。使用伪元素垂直居中这种方法的前提是要是行内元素才能进行居中。结语以上的方法基本上可以用完成各种情况的居中。前言在我看来，入门CSS的路上最烦人的就是CSS的各种居中了。在我初学CSS过程中，居中这个问题经常困扰到我。那为什么CSS的居中这么烦人呢？我认为，这是因为CSS的居中方法以及它的适...

Taste 2019-08-30 14:13 评论0 收藏0
css-元素居中

摘要：一水平居中行内元素水平居中使用属性可以实现在行内元素包括在块级父元素水平居中。使用负已知高度宽度使用使用使用三水平垂直居中公共结构块级元素垂直居中。本文重要是汇总了关于水平居中，垂直居中，还有水平垂直居中的各种方法。一、水平居中 1.行内元素水平居中使用text-align:center;属性可以实现在行内元素（包括：inline,inline-block、inline-tabl...

miqt 2019-08-29 18:39 评论0 收藏0
CSS水平居中和垂直居中的若干方法

摘要：居中分为水平居中和垂直居中，水平居中方式也较为常见和统一，垂直居中的方法就千奇百怪了。若把最后一行加上，即可同时实现水平和垂直居中。博客原文地址：Claiyre的个人博客 https://claiyre.github.io/如需转载，请在文章开头注明原文地址不为繁华易匠心从css入门就开始接触，无所不在的，一直备受争议的居中问题。css居中分为水平居中和垂直居中，水平居中方式也较为...

hiyayiji 2019-08-29 12:29 评论0 收藏0