CSS之元素居中

wapeyang 发布于2019-08-30 13:20 / 3430人阅读

摘要：多个块级元素按行放置将块级元素设置为行内元素父元素内容居中。块级元素使用绝对定位。需要知道子元素的高度。水平垂直居中思路跟之前一样。

水平方向 行内元素

.center-children {
  text-align: center;
}

适用于行内元素，行内块元素。

块级元素

.center-children {
  margin: 0 auto;
}

margin左右设置为auto，前提条件：元素本身需要设置宽度。

多个块级元素 按行放置

.center-children{
  display:inline-block;
}
.center{
  text-align: center;
}

将块级元素设置为行内元素,父元素内容居中。
还有一种方法是用flex，但只能兼容IE10+。

按列放置

与块级元素一样，只是设置多个块级元素。

垂直 行内元素

.center-children {
  padding-top: 30px;
  padding-bottom: 30px;
}

这里设置上下padding一样。只能用于单行的行内元素。

.center-children {
  height: 100px;
  line-height: 100px;
}

行高与高度相等。

多个行内元素

.center{
  display:table;
}
.center-children{
  display:table-cell;
  vertical-align:middle; 
}

父元素设置为table，子元素设置为table-cell。垂直居中。

.center{
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

直接使用flex，注意兼容性。

块级元素

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px;
}

使用绝对定位。需要知道子元素的高度。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

使用绝对定位。不需要知道子元素的高度。
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
使用flex。

水平垂直居中

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

思路跟之前一样。使用绝对定位。需要知道高度。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用绝对定位。不需要知道高度。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用flex。

总结

以上是页面布局中，经常需要用到的各种居中方法，网上也有很多技巧，这里就简单的总结归纳，用到时可以选用合适的方案。总体来说，在兼容性（兼容IE10以上）允许的条件下，优先选择flex方法，实现简单。

参考

http://howtocenterincss.com/
https://css-tricks.com/center...

GPU云服务器云服务器 html居中浮动元素 html居中css css元素图片居中

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

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

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之各种居中

摘要：转自个人博客本博客讨论居中情况设定为总宽度不定内容宽度不定的情况。改变大小时，仍然居中。宽高改变时，不再是居中效果。配合优点居中元素不对其他元素产生影响。水平居中当父元素设置时，子元素为，默认为内容宽度。转自个人博客本博客讨论居中情况设定为总宽度不定,内容宽度不定的情况。（改变大小时，仍然居中）。特别说明：在元素设置position:absolute;来设置居中效果时，除去博客...

happyfish 2019-08-28 18:29 评论0 收藏0
老生常谈之CSS的垂直居中

摘要：在通常情况下，对那些需要居中的元素来说，其尺寸往往是由其内容来决定的。虽然没有垂直居中效果，但也是完全可以接受的。的另一个好处在于，它还可以将匿名容器即没有被标签包裹的文本节点垂直居中。主要摘自：《CSS 揭秘》，强烈推荐的一本书。 44 年前我们就把人类送上月球了，但现在我们仍然无法在 CSS 中实现垂直居中。——James Anderson(https://twitter.co...

CompileYouth 2019-08-30 15:55 评论0 收藏0
CSS系列之让元素居中

摘要：辅助标签代码代码效果废话要让元素和辅助元素在一行，否则会出现水平不完全居中，当使用时，换行会被解析成空格。首先我们需要知道元素都有哪些种类？内嵌元素（display:inline;）如a，span，b，i 【一个不可定制的盒子】 [默认同行可以继续跟同类型标签] [内容撑开宽度] [不支持宽高] [不支持上下的margin和padding] [代码换行会被解析成空] 块...

fou7 2019-08-28 17:55 评论0 收藏0