阅读 476

css_13 | CSS——把“可以动的盒子”更优雅地展示:② “居中”盒子

本文推荐 PC 端阅读~

本文版权归 “公众号 | 前端一万小时” 所有,未经授权,请勿转载!
复制代码

获取编号.png

css_13
复制代码

涉及面试题.png

1. 如何让块级元素水平居中?如何让行内元素水平居中?如何让 inline-block 元素水平居中?
2. 垂直上下居中的办法?
复制代码

前言: 让“盒子”居中,在实际工作中可以说是随时都会用到。方法很多,我们在都理解的基础上用起来才能有的放矢、得心应手。



1 水平居中

1.1 在父元素上设置 text-align: center; 使文字/图片水平居中

.container {
  text-align: center;
}
复制代码

1.2 margin

.container {
  width: 80%;
  margin: 0 auto;
}
复制代码

2 垂直居中

2.1 居中 vs 不居中

🔗源码及效果展示
html

<div class="ct">
    <p>Hello,Oli的前端一万小时</p>
    <p>Hello,Oli的前端一万小时</p>
  </div>
复制代码

css

.ct {
  padding: 40px 0;
/*直接上下 padding 相等。整个容器的高度由内容高度撑开,
我们大部分页面都是这样的。*/

  text-align: center;
  background: #eee;
}
复制代码

14-01.png

2.2 绝对定位实现“弹窗”居中

打开一个页面出现一个弹出框,那这个弹出框在页面垂直居中。这个弹出框可能下边还有东西,那这个弹出框很明显就是绝对定位了。因为,如果他不是绝对定位,他怎么去覆盖其他元素呢!

但由于用户的屏幕有大有小,但我都要让这个弹出框居中,怎样办?
🔗源码及效果展示
html

<body>
  <div class="dialog">
    <div class="header">我是标题</div>
    <div class="content">我是内容</div>
  </div>
</body>
复制代码

css

html,body {
  height: 100%;
}

/*🚀注释1️⃣*/
.dialog {
  position: absolute;
  left: 50%;
  top: 50%;
/* 由于用户的屏幕有大有小,那我都要让这个弹出框居中,怎样办?*/
/*left: 50% 表示 left 的值是它宽度的一半,所以它的这个“左上角”在
水平位置上是居中的;
   top: 50% 表示这个“左上角”在他的顶部(从上到下)是居于 50% ,即这个“左上
角”在页面上居中。*/


/*🚀注释2️⃣*/
  margin-left: -200px;
  margin-top: -150px;
/*但我们并不是需要这个“左上角”居中,而上想让“中心”居中,因此我们用了“负 margin”:
  margin-left: -200px; 表示让“左上角”再移动盒子“宽度”的一半;
  margin-top: -150px;  表示让“左上角”再移动盒子“高度”的一半。
  请看注释1️⃣的图!
*/


/*❓但以上的移动都是基于盒子“宽高”在一定的前提下,
那如果“宽高”没有固定,那怎么实现居中呢?*/
/*答:
  transform: translate(-50%, -50%);

这个属性就是相对于自身“宽高”来做偏移,那这个时候,
我不管里边的内容是多少,它整个都是居中的。他对“宽高”就没有限制了。
这种方式是最好的,在 IE9 以上都可以用的。
请看注释2️⃣的图!
*/


  width: 400px;
  height: 300px;
  box-shadow: 0px 0px 3px #000;
}

.dialog .header{
  padding: 10px;
  background: #000;
  color: #fff;
}
.dialog .content{
  padding: 10px;
}
复制代码
  • 注释1️⃣:

14-02.png

  • 注释2️⃣:

14-03.png

14-04.png

2.3 伪元素实现居中

🔗源码及效果展示
html

<body>
  <div class="box">
    <img src="https://qdywxs.github.io/css-images/css13-img01.jpg" alt="">
  </div>
</body>
复制代码

css

.box{
  width: 300px;
  height: 200px;
  border: 1px solid ;
  text-align: center;
/*这个属性可以实现“水平”居中。*/

}

.box::before{
/*用伪元素选择器来实现“垂直”居中。*/

  content: '';
  display: inline-block;
  height: 100%;
/*使这个伪元素的高度等于盒子的高度,撑满父容器。*/

  vertical-align: middle;
}

.box img {
  vertical-align: middle;
  width: 150px;
}
复制代码

vertical-align 实现居中.png

2.4 table-cell 实现居中

🔗源码及效果展示
html

<body>
  <div class="box">
    <img src="https://qdywxs.github.io/css-images/css13-img01.jpg" alt="">
  </div>
</body>
复制代码

css

.box{
  width: 300px;
  height: 200px;
  border: 1px solid ;

  display: table-cell;
  vertical-align: middle;
/* vertical-align: middle 在表格元素中实现居中效果很明显。
但这里 display: table-cell; 后,就不是一个块级元素了,
如果不加宽度,那么宽度就会自动收缩!*/

  text-align: center;
}
复制代码

14-06.png

2.5 display: flex; 实现居中

🔗源码及效果展示
html

<div class="space">
  <div class="earth"></div>
</div>
复制代码

css

.space {
  width: 100vw;
  height: 100vh;  
  /* 设置宽高以显示居中效果 */

  display: flex; 
   /* 弹性布局 */

  align-items: center; 
   /*告诉里边的盒子垂直方向上应该:垂直居中 */

  justify-content: center;  
  /*告诉里边的盒子水平方向上应该:水平居中 */
}

body {
  margin: 0;
  background: rgba(0, 0, 0, .95);
}

.earth::after {
  content: '🌏';
/*注意这个“地球”看着像个图片,但他实际上是一个文字。*/

  font-size: 85px;
}
复制代码


后记: 下一篇我们讲“布局”,其实很多知识我们这连着的几篇文章都涉及到了,下一篇我们就做一个总结,看看我们实际工作中都有哪些常用的“布局”方式。

祝好,qdywxs ♥ you!

关注下面的标签,发现更多相似文章
评论