1、文本水平居中
line-height,text-align:center(文字)
元素水平居中 margin:0 auo

方案1：position 元素已知宽度
父元素设置为：position: relative;
子元素设置为：
position: absolute; left: 50%;top: 50%;margin: -50px 0 0 -50px;
距上50%，据左50%，减去元素自身宽度的距离

方案2：position transform 元素未知宽度
margin: -50px 0 0 -50px;替换为：transform: translate(-50%,-50%);

方案3：flex布局
父元素加：
display: flex; //flex布局
justify-content: center; //使子项目水平居中
align-items: center; //使子项目垂直居中

CSS水平垂直居中常见方法总结2的更多相关文章

  1. CSS水平垂直居中常见方法总结

    1.元素水平居中 当然最好使的是: margin: 0 auto; 居中不好使的原因: 1.元素没有设置宽度,没有宽度怎么居中嘛! 2.设置了宽度依然不好使,你设置的是行内元素吧,行内元素和块元素的区 ...

  2. 53.CSS---CSS水平垂直居中常见方法总结

    CSS水平垂直居中常见方法总结 1.元素水平居中 当然最好使的是: margin: 0 auto; 居中不好使的原因: 1.元素没有设置宽度,没有宽度怎么居中嘛! 2.设置了宽度依然不好使,你设置的是 ...

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

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

  4. 介绍一种css水平垂直居中的方法（非常好用！）

    这次介绍一下一个水平垂直居中的css方法,这个方法可以说是百试百灵,废话不多说,直接附上代码: html,body{ width:100%; height:100%; } 你需要居中的元素{ posi ...

  5. css水平垂直居中的方法与 vertical-align 的用法

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 1. 已知元素宽度 方法一:已知宽高,可以用position定位 + margin负值的方法 : 绝对定位 ...

  6. css 水平垂直居中的方法总结

    在项目中经常会遇到设置元素水平垂直居中的需求.而且具体的场景也不同,所以将个人总结的方法做个汇总,希望对浏览者有用. 以下所举的例子都以一个html为准,这里规定好一些公用样式. body { bac ...

  7. [css]水平垂直居中的方法

    1.top:cale(50% - 2rem); left:cale(50% - 2rem);

  8. CSS水平垂直居中总结

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

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

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

随机推荐

  1. 钉钉、钉应用（微应用和E应用）开发介绍

    钉钉,数字化新工作方式,让工作更简单 目前在钉钉的官网可以看到,超过700万家企业组织正在使用钉钉.笔者也相信,这一数字每天都在增加.获得群众的认可,也是理所当然的,体验过钉钉,就能感觉到,钉钉的考勤 ...

  2. Flink架构（五）- 检查点，保存点，与状态恢复

    检查点,保存点,与状态恢复 Flink是一个分布式数据处理系统,这种场景下,它需要处理各种异常,例如进程终止.机器故障.网络中断等.因为tasks在本地维护它们的state,Flink必须确保在出现故 ...

  3. Apache Kafka（九）- Kafka Consumer 消费行为

    1. Poll Messages 在Kafka Consumer 中消费messages时,使用的是poll模型,也就是主动去Kafka端取数据.其他消息管道也有的是push模型,也就是服务端向con ...

  4. C++继承、多态与虚表

    继承 继承的一般形式 子类继承父类,是全盘继承,将父类所有的东西都继承给子类,除了父类的生死,就是父类的构造和析构是不能继承的. 继承的访问权限从两方面看: 1.对象:对象只能直接访问类中公有方法和成 ...

  5. if a != None:

    >>> x = 1 >>> not x False >>> x = [1] >>> not x False >>&g ...

  6. 计算几何-Dot-Vector

    This article is made by Jason-Cow.Welcome to reprint.But please post the article's address. 看了书,然后码 ...

  7. vue中移动端调取本地的复制的文本

      _this.$vux.confirm.show({           title: '复制分享链接',           content: ‘分享的内容’,           onConfi ...

  8. Logarithmic-Trigonometric积分系列（一）

    \[\Large\displaystyle \int_{0}^{\frac{\pi }{2}}x^{2}\ln\left ( \sin x \right )\ln\left ( \cos x \rig ...

  9. Git - git bash 在 windows 下创建软连接

    1. 概述 使用 git bash 在 windows 下创建软连接 或者叫 快捷方式 感谢 Tony 老师的帮助 Tony 的技术笔记 Windows 使用 ln -s 创建软链接 2. 问题 需求 ...

  10. go基础_defer

    defer defer是go语言中的关键字 特点:FILO 作用:保障一些申请的资源最终得以释放 func main() { defer fmt.Println("line-1") ...