水平垂直居中

1.margin 负值调整偏移实现

兼容性: 当前流行的使用方法。

    <div class="box">
<div class="content"></div>
</div>
.box{
width: 100%;
height: 100%;
}
.content{
position: absolute;
left: 50%;
top: 50%;
margin-left:-50px;
margin-top:-50px;
/* transform: translate(-50%,-50%);*/ height:100px;/* height的一半 */
width:100px; /*width的一半 */
background: pink;
}

首先设置绝对定位元素,相对于原点left,top设置50%。由于是基于content元素的开始位置,真正居中,需要设置content的中心点 水平垂直居中。

2.margin auto 实现

兼容性:IE7及之前版本不支持

    <div class="box">
<div class="content"></div>
</div>
/* margin:auto */
.box{
position: relative;/* 非static定位 */ width: 200px;
height: 200px;
border: 1px solid;
}
.content{
position:absolute;/* 相对于父元素第一个非static定位 */
margin:auto;
top:;
left:;
right:;
bottom:; height:100px;
width:100px;
background: pink;
}

要点:绝对定位,margin:auto, TRBL 。

2.flex 实现

兼容性:css3特性

    <div class="box">
<div class="content"></div>
</div>
.box{
display: flex;
justify-content: center;
align-items: center; width: 200px;
height: 200px;
border: 1px solid;
}
.content {
width: 100px;
height: 100px;
background: pink;
}

设置容器使用flex布局,justify-content 设置主轴居中(水平居中),align-items 设置垂直居中。

4)table-cell 实现

    <div class="box">
<div class="content"></div>
</div>
.box{
display: table-cell;
text-align: center;
vertical-align: middle; width: 200px;
height: 200px;
border: 1px solid;
}
.content{ display: inline-block;
height:100px;
width:100px;
background: pink;
}

table-cell 布局,把内容水平居中和垂直居中。

移动端css水平垂直居中的更多相关文章

  1. CSS水平垂直居中总结

    行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...

  2. HTML+CSS水平垂直居中

    啦啦啦,好了,今天来分享自己的第一个知识点,难得自己还能想起来过来博客园,写写博客的. 好了,言归正传,今天分享关于html和css的一个简单的知识点,对于大部分从事前端开发的人员来说可能都是很简单的 ...

  3. css水平垂直居中对齐方式

    1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...

  4. 把简单做好也不简单-css水平垂直居中

    44年前我们把人送上月球,但在CSS中我们仍然不能很好实现水平垂直居中. 作者:Icarus 原文链接:http://xdlrt.github.io/2016/12/15/2016-12-15 水平垂 ...

  5. CSS水平垂直居中的方法

    原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...

  6. css 水平垂直居中总结

    空闲总结了下水平垂直居中方案,欢迎补充: 水平居中 水平居中有两种情况: 子元素是内联元素 这种那个情况下只需要在父元素定义: text-align:center; 例子: html: //省略了bo ...

  7. CSS水平垂直居中的几种方法2

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

  8. CSS水平垂直居中的几种方法

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

  9. 常见的几种 CSS 水平垂直居中解决办法

    用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...

随机推荐

  1. DAY6:文件读取

      文件读取: f = open("文件名","r",encoding="utf-8").read()#文件读取 print(f) 写入文件 ...

  2. IP通信基础课堂笔记----第三章(自认为的重点)

    网络层协议IP IP数据包格式:固定部分        {  标识(16):计数器,源站每发送一个分组,标识+1:源IP地址的标识是全网唯一的. (包含TCP/UDP首部)  |  标志(3):当最低 ...

  3. 北大poj- 1013

    Counterfeit Dollar Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 50515   Accepted: 15 ...

  4. 在eclipse上集成安装阿里巴巴代码规约P3C插件

    在eclipse上集成安装阿里巴巴代码规约P3C插件 参照网址: https://jingyan.baidu.com/article/2d5afd6923e78b85a3e28e5e.html 首先进 ...

  5. java使用poi导出excel

    继上一篇导出pdf,这篇导出excel. 1.导入依赖 <dependency> <groupId>org.apache.poi</groupId> <art ...

  6. [C# 基础知识系列]专题二:委托的本质论 (转载)

    引言: 上一个专题已经和大家分享了我理解的——C#中为什么需要委托,专题中简单介绍了下委托是什么以及委托简单的应用的,在这个专题中将对委托做进一步的介绍的,本专题主要对委本质和委托链进行讨论. 一.委 ...

  7. python基础学习1(linux命令)

    读研时转人工智能,机器学习方向,必然要用到python,于是开始自学. 1.环境: 使用linux环境下python编译,熟悉各种基本操作. 2.书籍: --  笨方法学python --   a b ...

  8. Ubuntu如何百度云盘下载

    我使用Firefox浏览器下载. (1)先为浏览器下载一个插件:网盘助手 (2)通过终端安装aria2: sudo apt-get install python-apt sudo apt-get in ...

  9. centos7下部署node应用程序

    一.安装node 二.安装nginx 三.使用express写一个简单的demo,并且使用pm2部署 四.错误 invalid PID number "" in "/ru ...

  10. blueprint的使用

    第一步:导入蓝图模块: from flask import Blueprint 第二步:创建蓝图对象: #Blueprint必须指定两个参数,admin表示蓝图的名称,__name__表示蓝图所在模块 ...