码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-12-14 13:47:37      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:auto   body   orm   容器   ali   页面   back   元素   form属性   

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

适用元素:文字,链接,及其其它inline或者inline-*类型元素(inline-block,inline-table,inline-flex)

html部分代码:
    <div>文字元素</div>
    <nav>
  <a href="">链接元素01</a>
  <a href="">链接元素02</a>
  <a href="">链接元素03</a>
    </nav>

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部分代码:
    <div class="center">
  水平居中的块状元素
    </div>
    <p class="center">水平居中的块状元素</p>

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

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

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

 html部分代码:
    <div class="center">
    水平居中的块状元素
    </div>
    <div class="center">
    水平居中的块状元素
    </div>

<!--
现在大家可以看到以上两个块状元素水平横向排列并且居中
提示:如果需要将以上两个元素垂直排列居中的话,使用上一节的margin: 0 auto;即可实现
-->
  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部分代码:

<div>水平居中的块状元素</div>
<div>水平居中的块状元素</div>

 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部分代码:

    <div id="container">
    <a href="#">hello, gbtags.com</a>
    </div>

  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部分代码:

<div class="container">
  <a href="#">
    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!
  </a>
</div>

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

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

html代码:

<div class="item">
</div>

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代码:
    <div class="item">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet sint repellendus ab aut quisquam eligendi est in deleniti.
</div>

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

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

html代码:

<div class="item">
</div>
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代码:

<div class="item">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate nostrum quaerat debitis.
</div>

css代码:

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

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

 html代码:

<div class="parent">
  <div class="item"></div>
</div>
 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           

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

标签:auto   body   orm   容器   ali   页面   back   元素   form属性   

原文地址:https://www.cnblogs.com/baimeishaoxia/p/12038849.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!