css 元素居中

一:水平居中

1、行内元素水平居中

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

.container {
  text-align: center;
}

2、块级元素水平居中

  • 先给块级元素设置宽度(不设置宽度,块级元素自己占据一整行,何谈居中)
  • 再给块级元素设置margin:0 auto;(当上下margin不一定是0,可以按照需求来设置)
.container {
  width: 200px;
  margin:  0 auto;
}

二、垂直居中

1、块级元素内部垂直居中

原理:设置块级元素上下padding相等

前提:没有设置高度,高度由内容撑开。块级元素如果设置了高度,就不知道如何设置padding的数值 demo

<style>
.ct{
  padding: 40px 0;
  text-align: center;
  background: #eee;
}
</style>
 <div class="ct">
    <p>好好学习</p>
    <p>天天向上</p>
  </div>

执行结果

2、绝对定位实现垂直居中

(1)demo使用前提是块级元素的宽高固定

<div class="dialog">
    <div class="header">我是标题</div>
    <div class="content">我是内容</div>
  </div>
<style>
html,body {
  height: 100%;
}


.dialog {
  position: absolute;
  left: 50%; //使用绝对定位,让dialog起点偏移到页面的中央
  top: 50%;
  margin-left: -200px;//通过负margin,偏移dialog宽高的一半,让dialog处于正中
  margin-top: -150px;
  
  width: 400px;
  height: 300px;
  box-shadow: 0px 0px 3px #000;
}

.dialog .header{
  padding: 10px;
  background: #000;
  color: #fff;
}
.dialog .content{
  padding: 10px;
}
</style>

(2)解析: 使用绝对定位 position: absolute,让dialog起点偏移到页面的中央

通过负margin,偏移dialog宽高的一半,让dialog处于正中。不用relative的原因是已经用了绝对定位了,所以只好用负margin。结果如图

(3)块级元素的宽高不固定,就不能用负margin了(margin使用百分比是相对于父元素的宽度)。我们可以用css3的一个transform的属性,transform是相对自身的宽高来做偏移的。

3、vertical-align实现水平垂直居中

原理:

  • 通过text-align:center 实现水平居中
  • 通过伪元素设置一个内容为空的元素,设置高度为100%,通过vertical-align实现基线对齐。

使用环境:块级元素中设置行内元素水平垂直居中 代码:demo 结果:

遇坑:1、当然使用绝对定位也可以实现这个效果

2、伪元素设置display:block是有问题,需要设置为inline-block

3、使用伪元素是为了减少标签

4、table-cell实现居中

原理:把box设置为表格元素(display: table-cell),通过vertical-align: middle对里面的元素做垂直居中 缺点:把box设置为display: table-cell,box不再是块级元素,如果不设置宽度就会收缩。

代码:demo 结果:

5、display: flex实现

代码:demo

<div class="space">
  <div class="earth"></div>
</div>
.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;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css常用布局

    执行结果链接描述 在header 和footer上再包裹一层div,在外层的div上添加背景颜色,设置内层layout上设置左右margin:auto,就出现了...

    bamboo
  • jQuery DOM操作

    在目标对象前插入同级兄弟元素(不是头部,而是外面,和对象并列同级),参数和append类似

    bamboo
  • css之选择器

    CSS(Cascading层叠 Style样式 sheets表),是用来为网页添加样式的代码。 css选择器的作用是用于选中元素,以便为其添加样式 1.基础选择...

    bamboo
  • 前端学习(21)~css学习:如何让一个元素水平垂直居中?

    如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多。

    Vincent-yuan
  • 自学前端第三天

    小小咸鱼YwY
  • ES6基础 数组的扩展

    对于那些没有部署 Iterator 接口的类似数组的对象(如普通object),扩展运算符就无法将其转为真正的数组。

    王翔
  • 让所有网页变成RSS —— Huginn

    下面开始举例子。我们现在要把我的博客 http://walkginkgo.com/转换成 RSS。

    huginn 中文网
  • spring boot自动配置原理

    想使用自动配置,需要在启动类上添加EnableAutoConfiguration注解,但是一般我们都会在启动类上添加springbootapplication注...

    用户1637228
  • CSS-各种cs样式之浏览器兼容处理方式汇总大全(更新中...)

    xing.org1^
  • DataFrame中文列名对齐的问题

    然而我的强迫症又发了,标题为什么对不齐啊。网上一研究,是因为标题是中文所致,解决方法:

    用户1075292

扫码关注云+社区

领取腾讯云代金券