简介

总结记录一下经常需要用到垂直居中布局，欢迎补充(空手套。。。O(∩_∩)O)

以下栗子如果未特别标注同一使用这样的html结构

<div class="container">

    <div class="content"></div>

</div>

垂直居中布局

利用绝对定位和负margin

绝对定位可以很容易做到top:50%，现在只要再让目标元素上移自身高度的一半就垂直居中了

.container {

  background: #777777;

  height: 400px;

  position: relative;

}

.container .content {

  width: 100px;

  height: 100px;

  position: absolute;

  top: 50%;

  margin-top: -50px;

  left: 50%;

  margin-left: -50px;

  background: #ee5f28;

}

优点：兼容性好
缺点：需要知道居中元素的高度

利用绝对定位和transform

 .container {

  background: #777777;

  height: 400px;

  position: relative;

}

.container .content {

  width: 100px;

  height: 100px;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate3d(-50%, -50%, 0);

  background: #ee5f28;

}
  • 优点：不需要考虑content元素的高度
  • 缺点：兼容性

利用绝对定位和calc

.container {

  background: #777777;

  height: 400px;

  position: relative;

}

.container .content {

  width: 100px;

  height: 100px;

  position: absolute;

  top: calc(50% - 50px);

  left: calc(50% - 50px);

  background: #ee5f28;

}
  • 优点：相比于前面少了两条样式
  • 缺点：兼容性

利用flex

.container {

  background: #777777;

  height: 400px;

  display: flex;

  justify-content: center;

  align-items: center;

}

.container .content {

  width: 100px;

  height: 100px;

  background: #ee5f28;

}
.container {

  background: #777777;

  height: 400px;

  display: flex;

}

.container .content {

  width: 100px;

  height: 100px;

  background: #ee5f28;

  margin: auto;

}
  • 优点：垂直居中特别容易搞定
  • 缺点：兼容性

震惊absoulute（绝对定位）还可以这样用

.container {

  background: #777777;

  height: 400px;

  position: relative;

}

.container .content {

  width: 100px;

  height: 100px;

  background: #ee5f28;

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  margin: auto;

}

优点：

  • 1.跨浏览器，兼容性好（无需hack，可兼顾IE8~IE10）；
  • 2.无特殊标记，样式更精简；
  • 3.自适应布局，可以使用百分比和最大最小高宽等样式；
  • 4.居中时不考虑元素的padding值（也不需要使用box-sizing样式）；
  • 5.布局块可以自由调节大小；6.img的图像也可以使用
  • 6.浏览器支持：Chrome、Firefox、Safari、Mobile Safari、IE8-10。 “完全居中”经测试可以完美地应用在最新版本的Chrome、Firefox、Safari、Mobile Safari中，甚至也可以运行在IE8~IE10上

使用inline-block

.container {

  background: #777777;

  height: 400px;

  text-align: center;

  font-size: 0;

  overflow: auto;

}

.container::after {

  content: '';

  display: inline-block;

  height: 100%;

  vertical-align: middle;

}

.container .content {

  display: inline-block;

  vertical-align: middle;

  width: 100px;

  height: 100px;

  background: #ee5f28;

}

这里注意：容器‘container’里要设置font-size:0;避免inline-block之间产生间隔

优点：

  • 内容高度可变
  • 内容溢出则能自动撑开父元素高度
  • 浏览器兼容性好，甚至可以调整支持IE7

使用table与table-cell

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    .container-table {

      background: #777777;

      height: 400px;

      width: 100%;

      display: table;

    }

    .container-table .container-cell {

      display: table-cell;

      vertical-align: middle;/* 这里达到了垂直居中的效果 */

    }

    .container-table .container-cell .content {

      width: 100px;

      height: 100px;

      margin: 0 auto;/* 利用margin值 水平居中*/

      background: #ee5f28;

    }

  </style>

</head>

<body>

  <div class="container-table">

    <div class="container-cell">

      <div class="content"></div>

    </div>

  </div>

</body>

</html>

  • 优点：

    • 内容高度可变
    • 内容溢出则能自动撑开父元素高度
    • 浏览器兼容性好
  • 缺点：额外标签

参考资料

css垂直居中布局总结的更多相关文章

  1. css布局 - 垂直居中布局的一百种实现方式（更新中...）

    首先将垂直居中的现象和实现方式两大方向细分类如下: 接下来逐条累加不同情况下的垂直居中实现. 目录: 一.父元素高度固定时,单行文本 | 图片的垂直居中 1. line-height行高简单粗暴实现法 ...

  2. CSS里总算是有了一种简单的垂直居中布局的方法了

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. CSS 实现：父元素包含子元素，子元素垂直居中布局

    ☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...

  4. CSS垂直居中总结

    工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享.本文讨论的垂直居中仅支持IE8+ 1.使用绝对定位垂直居中 <div class="container"> & ...

  5. 原生 CSS 网格布局学习笔记

    下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...

  6. CSS垂直居中精华总结

    1  table-cell方式 将center元素的包含框display设置为table,center元素的display设置为table-cell,vertical-align设置为middle. ...

  7. CSS垂直居中指南

    大概整理下css中的垂直居中问题 主要分两大类 1 知道块元素尺寸,一般就是指知道元素高度. 方法一:最简单的,类比水平居中. 思路:子元素设置为absolute;  top bottom都设置为0 ...

  8. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  9. 《CSS网站布局实录》读书笔记

    从Web标准.HTML标记.CSS语法基础介绍到实用技巧,事无巨细.实体书已不印刷,只能下载电子版 书的背景: 国内第一本web标准的CSS布局书,2006年9月第一版,作者李超. 环境背景: 当时主 ...

随机推荐

  1. H.264 详解

    一.MPEG-4说明 1.VOP视频编码技术 VO(Video Object):视频对象,它是场景中的某个物体,最简单的情况下就是矩形框,它是有生命期的,由时间上连续的许多帧构成. VOP(Video ...

  2. VSCode主题自定义（附详细注释及本人主题分享）

    先来一张本人自己配置的主题截图,喜欢的拿去用: 下面说说怎么自定义主题: 1.     Ctrl + ,(Ctrl键 + 逗号键):打开设置,也可以依次点击编辑器左上角 => 文件 => ...

  3. JavaJDBC【五、事务】

    概念: 事务(Transaction)作为单个逻辑工作单元执行的一系列操作. 这些操作都是作为一个整体一起向系统提交,要么都执行,要么都不执行. 特点: 原子性:一个完整操作. 一致性:当事务完成时, ...

  4. mysql 添加远程管理用户

    GRANT ALL PRIVILEGES ON *.* TO '用户名'@'%' IDENTIFIED BY '密码' WITH GRANT OPTION;   这一条是添加全权限的用户,用户名和密码 ...

  5. visio连接线随形状移动自动伸缩

    粘附可保持形状和连接线彼此依附.粘附打开时,可在移动形状时保持连接线跟着一起移动.粘附关闭时,移动形状时连接线将不会跟着移动. 1.在“视图”选项卡上的“视觉帮助​​”组中,单击对话框启动器 . 2. ...

  6. vue 设置全局变量、指定请求的 baseurl

    一. 基本环境前端vue:2.5.6axios:0.18使用vue脚手架构建项目.参照:webstorm搭建vue项目后台ssm框架前后端数据采用json格式传输二. 前端配置axios配置1.安装: ...

  7. 十三，k8s集群web端管理工具dashboard部署

    目录 部署 dashboard 由于会被墙, 所以要加一步拉取镜像 正式开始安装dashboard 查看 开放访问 配置dashboard用户 1. token 令牌认证 创建一个 serviceAc ...

  8. manjaro开机出现grub 解决办法

    # 第一步:输入ls出现(hd0,msods1),(hd0,msdos5),(hd0,msods7)# 不同的电脑不一样,这是我电脑中的磁盘分区,和系统中的表示方法不一样,# linux中一般是/de ...

  9. springboot配置对jsp页面的解析支持

    pom.xml文件配置依赖信息 <!--引入Spring Boot内嵌的Tomcat对JSP的解析包,不加解析不了jsp页面--> <dependency> <group ...

  10. DBSCAN算法及sklearn实现

    基本概念:(Density-Based Spatial Clustering of Application with Noiso) 1.核心对象: 若某个点的密度达到算法设定的阈值则其为核心点.(即r ...