文档章节

页面元素的垂直居中

励志成为开源扛把子
 励志成为开源扛把子
发布于 2017/07/10 03:30
字数 439
阅读 5
收藏 0
  • 垂直居中:单行的行内元素解决

 当一个行内元素,inline之类的,可以将他的height和line-height同事设置为父元素的高度即可实现垂直居中效果。

#container{
  background: #222;
  height: 200px;
}
/*  以下代码中,将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */
a{
  
  height: 200px;
  line-height:200px;  
  color: #FFF;
}
  • 垂直居中:多行的行内元素解决

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

.container{
  background: #222;
  width: 300px;
  height: 300px;
  /* 以下属性垂直居中 */
  display: table-cell;
  vertical-align:middle;
}
  • 垂直居中:已知高度的块状元素解决

定义居中元素的相关属性,如下:

/* 以下为居中代码 */
.item{
  top: 50%;
  margin-top: -50px;
  position: absolute;
  padding:0;
}
  • 垂直居中:未知高度的块状元素解决

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

.item{
  top: 50%;
  position: absolute;
  transform: translateY(-50%); /* 这里我们使用css3的transform来达到类似效果 */
}
  • 水平垂直居中:已知高度和宽度的元素解决

我们可以设置元素定位为absolute,并且设置top, left绝对值为50%,margin-top和margin-left为元素高度一半的负值即可,如下:

.item{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -75px;
  margin-left: -75px;
}
  • 水平垂直居中:未知高度和宽度元素解决

使用类似的transform属性来定义,即可实现,如下:

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

 

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

.parent{
  display: flex;
  justify-content:center;
  align-items: center;
  
  /* 注意这里需要设置高度来查看垂直居中效果 */
  background: #AAA;
  height: 300px;
}

 

 

 

 

 

 

© 著作权归作者所有

励志成为开源扛把子
粉丝 0
博文 15
码字总数 2159
作品 0
嘉定
程序员
私信 提问
CSS 如何使DIV层水平居中

CSS 如何使DIV层水平居中 DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过网络搜索和亲自实...

Z_dragon
2014/08/18
61
0
CSS整理(3)之让元素水平居中和垂直居中方法

在html页面中,为了排版上的美观或是在不同尺寸的屏幕上正常显示,我们一般都会将元素进行水平居中或是垂直居中,现在 做一下总结: 实现水平居中: 对于行内元素来说,直接对要设置的元素设...

hyz000
2016/03/29
59
0
探秘 flex 上下文中神奇的自动 margin

为了引出本文的主题,先看看这个问题,最快水平垂直居中一个元素的方法是什么? 水平垂直居中也算是 CSS 领域最为常见的一个问题了,不同场景下的方法也各不相同,各有优劣。嗯,下面这种应该...

chokcoco
05/23
0
0
前端知识复习(一)

1.CSS 中的盒子模型 画出对应的content, margin, padding, and border 边界 图片.png 2.元素 span, img, video 可以设置宽高吗? span不可以,img和video可以 span 属于行内非替换元素不能设...

治电小白菜
2017/11/28
0
0
关于CSS制作水平/垂直居中对齐问题

作为前端开发者,在制作Web页面时都有碰到CSS制作水平垂直居中的问题,我想大家都有研究过或者写过,特别是其中的垂直居中,更是让人烦恼。这段时间,我收集了几种不同的方式制作水平/垂直居...

ACE-705
2014/05/07
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
676
10
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
39
0
spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
今天
25
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
72
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
69
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部