简介

总结记录一下经常需要用到垂直居中布局，欢迎补充(空手套。。。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. std::list保存大量数据时，类型即是无析构函数，该list析构时会占用大量CPU

    std::list保存大量数据时,类型即是无析构函数,该list析构时会占用大量CPU

  2. 解决centos-yum无法正常使用问题

    刚刚最小化方式安装了CentOS 7 后,说实话,真不习惯也不喜欢纯shell方式工作,使用root账号登入后,马上想安装GNOME,但是发现yum不能正常工作!!! 一,输入安装X Window命令 ...

  3. spring 多数据源配置

    多数据源配置方法: 在配置数据源配置文件中多加一个数据源配置即可: <bean id="dataSource" class="org.apache.commons. ...

  4. element-ui中关闭对话框清空验证，清除form表单数据

    对于elementUI中对话框,点击对话框和关闭按钮 怎么清空验证,清空form表单,避免二次点击还会有 验证错误的提示.今天终于自己查资料解决了,分享给大家 1.首先在你的对话框 取消按钮 加一个c ...

  5. Java基础——2 操作符

  6. R安装包的问题

    package 'tswge' is not available (for R version 3.5.1) install.packages('tswge', repos="http:// ...

  7. ASE19 团队项目 模型组 scrum report集合

    scrum report 链接 scrum1 report scrum2 report scrum3 report scrum4 report scrum5 report scrum6 report ...

  8. Use pkgsrc on ARM

    What is this page? This page describes how to use pkgsrc on ARM architecture with EABI support. I bo ...

  9. Delphi TIdUDPClient组件

  10. C语言实现MD5校验

    根据网上资料,整理验证C程序代码. 接口函数: /****************************************************** *函数名称:Compute_data_m ...