【前端】这可能是你看过最全的css居中解决方案了~

csRyan 发布于2019-08-30 13:54 / 1911人阅读

摘要：水平居中行内元素解决方案适用元素文字，链接，及其其它或者类型元素，，部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居

1.水平居中：行内元素解决方案

适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，inline-flex）

html部分代码:
    文字元素
    
  链接元素01
  链接元素02
  链接元素03
    

css部分代码:
    nav, div{
    text-align: center;
        }
/*
解决方案：
将inline元素包裹在一个display属性为block的父级元素中（如,div, nav)
设置这个父级元素属性: text-align:center即可
*/

/* 现在大家可以看到nav和div中的子元素水平居中了 */

2. 水平居中：块状元素解决方案

对于块状元素（display:block）来说，我们需要将它的左右外边距（即，margin-left，margin-right）设置为auto，即可实现块状元素的居中，如下：

html部分代码:

水平居中的块状元素

css部分代码: /* 注意：需要居中的块元素需要有固定的宽度，否则无法实现居中，因为占据100%宽度 */ div,p { width: 200px; /* 这里需要设置元素宽度 */ height: 150px; background: #222; color: #FFF; } /* 定义居中关键属性 */ .center{ /* 这里可以设置顶端外边距 */ margin: 10px auto; } /* 现在大家可以看到居中效果的块状元素了 */

3.水平居中：多个块状元素解决方案

如果页面里有多个块状元素需要水平排列居中，可以将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center即可实现。

 html部分代码:
    
    水平居中的块状元素
    
    
    水平居中的块状元素
    


  css部分代码:
/*
解决方案：
设置这几个块状的元素display属性为inline-block，并且设置父元素text-align属性为center即可
*/
.center{
  display:inline-block;
}
body{
  text-align:center;
}
/* 元素美化 */
div{
  width: 100px;
  background: #222;
  height: 50px;
  color: #FFF;
  padding: 10px;
}

4.水平居中：多个块状元素解决方案 (使用flexbox布局实现)

使用flexbox布局，只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可

 html部分代码:

水平居中的块状元素
水平居中的块状元素

 css部分代码:

解决方案：
设置需要水平居中的块状元素的父元素display为flex ，并且justify-content属性为center即可

body{
  display: flex;
  justify-content: center;
}
/* 页面美化元素 */
div{
  width: 100px;
  background: #222;
  height: 50px;
  color: #FFF;
  padding: 10px;
  margin: 10px;
}

5. 垂直居中：单行的行内元素解决方案

当一个行内元素，即inline，inline-*类型的元素需要居中的话，可以将它的height和line-height同时设置为父元素的高度即可实现垂直居中效果。

 html部分代码:

    
    hello, gbtags.com
    

  css部分代码:

解决方案：将inline元素的高度和line-height设备为一致即可
#container{
  background: #222;
  height: 200px;
}
/*  以下代码中，将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */
a{
  height: 200px;
  line-height:200px;  
  color: #FFF;
}

6.垂直居中：多行的行内元素解决方案

组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果，如下：

 html部分代码:


  
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis blanditiis optio accusamus quia sapiente at labore consectetur in quasi veritatis possimus quod nihil aliquam vero saepe rem quas. Ratione eligendi!
  


  css部分代码:
解决方案：
使用display:table-cell和vertical-align来控制元素的居中效果
.container{
  background: #222;
  width: 300px;
  height: 300px;
  /* 以下属性垂直居中 */
  display: table-cell;
  vertical-align:middle;
}
a{
  color:#FFF;
}

7. 垂直居中：已知高度的块状元素解决方案

html代码：




css代码：

解决方案：将待居中元素设置为绝对定位，并且设置margin-top为居中元素高度一半的负值
div{
  width: 100px;
  height: 100px;
  background: #222
}
/* 以下为居中代码 */
.item{
  top: 50%;
  margin-top: -50px;
  position: absolute;
  padding:0;
}
/* 现在可以看到这个元素垂直居中了，如果元素有padding设置，请自己相对计算一下margin-top值 */

8.垂直居中：未知高度的块状元素解决方案

对于无法知道高度的元素，使用transform属性来垂直移动来实现垂直居中：

html代码：
    
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet sint repellendus ab aut quisquam eligendi est in deleniti.


css代码：
解决方案：
因为无法指定margin-top的偏移量，所以这里使用transform属性，垂直移动-50%即可
div{
  width: 150px;
  background: #222;
  color: #FFF;
}
/* 元素垂直居中代码 */
.item{
  top: 50%;
  position: absolute;
  transform: translateY(-50%); /* 这里我们使用css3的transform来达到类似效果 */
}

9. 水平垂直居中：已知高度和宽度的元素解决方案

html代码：



css代码：

解决方案：
将设置元素绝对定位，并且设置margin-left和margin-right为居中元素(高度或宽度/2)的负值即可
div{
  width: 150px;
  height: 150px;
  background: #222;
  color: #FFF;
}
.item{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -75px;
  margin-left: -75px;
}
/* 以上代码即可保证一个已知高度和宽度的元素水平垂直都居中 */

10.水平垂直居中：未知高度和宽度元素解决方案

html代码：


  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate nostrum quaerat debitis.


css代码：

解决方案：将设置元素绝对定位，并且设置transform的translate为Ｘ，Ｙ轴同时移动-50%即可
div{
  background: #222;
  color: #FFF;
}
/* 以下代码保证元素在水平和垂直方向上绝对居中 */
.item{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

11.水平垂直居中：使用flex布局实现

 html代码：


  

 css代码：

解决方案：设置flex布局，并且定义居中元素的父元素justify-content和align-items属性为center即可
/* 子元素CSS */
.item{
  background: #222;
  color: #FFF;
  width: 100px;
  height: 100px;
}
.parent{
  display: flex;
  justify-content:center;
  align-items: center;
  /* 注意这里需要设置高度来查看垂直居中效果 */
  background: #AAA;
  height: 300px;
}

注：以上资源整理自极客标签学习文档，推荐大家学习使用

附上网址：http://www.gbtags.com

idc机房托管私有云 html居中css dns服务器可能不可用怎么解决前端css css前端

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

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

【前端】这可能是你看过最全的css居中解决方案了~

摘要：水平居中行内元素解决方案适用元素文字，链接，及其其它或者类型元素，，部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行内元素解决方案适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，i...

Simon 2019-08-01 18:31 评论0 收藏0
前端学习资源

摘要：掘金日报第四期使用怎么能不知道这些插件合集掘金日报主打分享优质深度技术内容，技术内容分前端后端产品设计工具资源和一些有趣的东西。目前已经涵盖了的相关资源链接，供大家参考与学习。【掘金日报】第四期使用Sublime？怎么能不知道这些 Sublime 插件合集！掘金日报主打分享优质深度技术内容，技术内容分：前端、后端、Android、iOS、产品设计、工具资源和一些有趣的东西。前端...

xzavier 2019-08-30 13:57 评论0 收藏0
前端学习资源

摘要：掘金日报第四期使用怎么能不知道这些插件合集掘金日报主打分享优质深度技术内容，技术内容分前端后端产品设计工具资源和一些有趣的东西。目前已经涵盖了的相关资源链接，供大家参考与学习。【掘金日报】第四期使用Sublime？怎么能不知道这些 Sublime 插件合集！掘金日报主打分享优质深度技术内容，技术内容分：前端、后端、Android、iOS、产品设计、工具资源和一些有趣的东西。前端...

weij 2019-08-26 11:43 评论0 收藏0
❤️十大排序算法详解❤️——可能是你看过最全的，完整版代码

文章目录前言交集排序冒泡简单快速排序插入排序直接插入排序希尔排序选择排序简单选择排序堆排序归并排序二路多路非比较类计数排序桶排序基数排序最后

Riddler 2021-09-07 09:59 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0