【CSS篇】css居中解决办法

appetizerio 发布于2019-08-30 15:53 / 788人阅读

摘要：水平居中行内元素适用元素块级元素适用于元素一个块级元素多个块级元素方法一将块级元素变为行内块级元素部分部分方法二布局部分部分垂直居中行内元素单个行内元素情况一当或文本有包裹元素时，设置相等的上下情况二当或

水平居中

【行内元素】适用inline,inline-block,inline-table,inline-flex元素

.center {
  text-align: center;
}

【块级元素】适用于block level元素

①一个块级元素

   .center {
 margin: 0 auto;
   }

②多个块级元素

方法一：将块级元素变为行内块级元素

html部分：

  1
  2
  3

css部分：
.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}


方法二：flex布局

html部分：

  1
  2
  3

css部分：
.flex-center{
    display:flex;
  justify-content:center;
}

垂直居中

【行内元素】

①单个行内元素：

情况一：当link或文本有包裹元素时，设置相等的上下padding

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

情况二：当link或文本没有包裹时，设置行高和高度相等

.center-text-trick {
  height: 100px;
  line-height: 100px
}

②多个行内元素：

方法一：将多个行内元素分别置于table-cell中

html部分:

  

  1

  

css部分：
table td {
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  /* default is vertical-align: middle; */
}


方法二：将父元素设置为display:table,将自身设置为display:table-cell

html部分：

  1

css部分：
.center-table {
  display: table;
  height: 250px;
  width: 240px;
}
.center-table p {
  display: table-cell;
  vertical-align: middle;
}


方法三：使用felex

html部分：

  1

css部分：
.flex-center{
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;/*父容器必须有固定高度*/
}


方法四：当以上代码均不可用时，可尝试此奇淫巧技

html部分：

  1

css部分：
.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
}

【块级元素】

①已知元素高度(绝对定位+负的margin)

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* 为元素高度的一半，没有box-sizing时，为height+padding+border的一半*/
}

②不知元素高度（与上一方法，大同小异）

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

③flex布局

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

水平垂直均居中

①有固定宽高的元素

.parent {
  position: relative;
}

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

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

  margin: -70px 0 0 -170px;/* 注意此处为height+padding+的一半*/
}

②没有固定宽高的元素(同之前没有固定宽高元素一样，用transform解决)

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

③使用flexbox布局

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

以上的居中大法，基本可以满足日常需求啦，倘若有所错误，欢迎指正啦～

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

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

前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

Hydrogen 2019-08-05 12:48 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
朝花夕拾：CSS居中完全指南

摘要：正文居中是常被开发者抱怨的问题之一。注意你不能将浮动元素居中。水平且垂直居中你可以将前面的方法任意组合起来，实现完美的居中效果。这样就可以使元素水平且垂直居中，并具有良好的浏览器兼容性。参考 Centering in CSS: A Complete Guide BY CHRIS COYIER ON SEPTEMBER 2, 2014 附：文中涉及到了flex的一些用法，如果没有接...

laznrbfe 2019-08-29 13:45 评论0 收藏0
老生常谈之CSS的垂直居中

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

CompileYouth 2019-08-30 15:55 评论0 收藏0
CSS进阶篇--CSS让浮动元素水平居中

摘要：对于定宽的非浮动元素我们可以用进行水平居中。对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中。对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。如下： HTML 代码：我是浮动的我也是居中的 CSS 代码： .box{ float:left;...

fevin 2019-08-28 18:17 评论0 收藏0