温习一下元素水平垂直居中的几种方法

元素有具体宽度

1、absolute+负边距

.LV_center{
  border: 1px solid red;
  position: absolute;
  width: 100px;
  height: 100px;
  top:50%;
  left: 50%;
  margin-top:-原高度/2 ;
  margin-left: -原高度/2
}

2、absolute+calc

.LV_center{
  border: 1px solid red;
  position: absolute;
  width: 100px;
  height: 100px;
  top:calc(50% - 原高度/2);
  left:calc(50% - 原高度/2);
}

3、absolute+margin auto

.LV_center{
  border: 1px solid red;
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

元素宽度不定

1、absolute+transform,css3特性2d平移

.LV_center{
  border: 1px solid red;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

2、line-height,外层设置行高,内层继承行高

.box{
  line-height: 300px;
}
.LV_center{
  border: 1px solid red;
  display: inline-block;
  line-height: inherit;
  vertical-align: middle;
}

3、table-cell,模拟td特性,让元素像表格里的td

.box{
  border: 1px solid red;
  width: 300px;
  height: 300px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.LV_center{
  border: 1px solid red;
  display: inline-block;
}

4、flex弹性盒子

.LV_center{
border: 1px solid red;
  display: flex;
  justify-content: center;  //主轴对齐方式
  align-items: center;  //位于主轴中心
}

推荐一位讲得更详细的 : https://www.jianshu.com/p/1b3337214941

css元素水平垂直居中的更多相关文章

  1. CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳)

    本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...

  2. CSS元素水平垂直居中的方法

    1.  元素水平居中 1.1  设置父元素的属性 text-align: center; 说明:此属性只针对父元素的子元素为内联元素时有效,比如:img,input,select,button等(行内 ...

  3. css元素水平垂直居中的十种方法

    四月底在杭州金诚的前端面试过程中,问到了父元素中子元素水平和垂直居中的方式,因为平时疏于整理,只说上来两种.后来面试过了,所以现在回想到这个问题,所以针对各种情况集中整理一下. 首先看页面结构和元素的 ...

  4. CSS布局:元素水平垂直居中

    CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...

  5. css进阶 04-如何让一个元素水平垂直居中?

    04-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...

  6. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  7. 【Web】CSS实现绝对定位元素水平垂直居中

    网页中常常需用让绝对定位元素水平垂直居中,下面介绍2种方法: 一 元素宽度未知 <!DOCTYPE html> <html lang="en"> <h ...

  8. CSS未知宽高元素水平垂直居中

    方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...

  9. css 实现元素水平垂直居中总结5中方法

    个人总结,如有错误请指出,有好的建议请留言.o(^▽^)o 一.margin:0 auto:text-align:center:line-height方法 <div id="divAu ...

随机推荐

  1. Linux用户权限管理

    Linux操作系统: 多用户多任务的操作系统 用户类型分为:     管理员用户 : root     普通用户分为:系统用户/程序用户 用户相关的文件:     /etc/passwd      用 ...

  2. bert模型参数简化

    我们下载下来的预训练的bert模型的大小大概是400M左右,但是我们自己预训练的bert模型,或者是我们在开源的bert模型上fine-tuning之后的模型的大小大约是1.1G,我们来看看到底是什么 ...

  3. Python面试题(1)

    1.如何反向迭代一个序列 #如果是一个list,最快的方法使用reversetempList = [1,2,3,4]tempList.reverse()for x in tempList:    pr ...

  4. nginx 搭建上传服务器

    nginx webdav 服务器搭建 该模块可以为Http webDAV 增加PUT,DELETE,MKCOL,COPY和MOVE等方法.模块在默认编译的情况下是不被包含的,需要指定编译 ./conf ...

  5. 【java异常】 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.emptech.db.demo.mapper.master.MOmQuotaTBMapper.findOmQuotaTB

    <mapper namespace="com.emptech.db.demo.mapper.master.MOmQuotaTBMapper"> public inter ...

  6. Ant Design的Form

    Ant Design的Form 使用onFieldsChange时不要与 mapPropsToFields一起使用,将导致表单校验等失效

  7. 安装sentry的几个命令

    docker run -d --name sentry-redis redis docker run -d --name sentry-postgres -e POSTGRES_PASSWORD=se ...

  8. 算法——回文(palindrome)

    回文(palindrome):指的是从头读到尾与从尾读到头一模一样的字符串. 分别在C.Java与Python实现回文检测: C: #include <stdio.h> #include ...

  9. monkey--常用参数

    前戏 参数分类:常规类参数,事件类参数,约束类参数,调试类参数 常规类参数:常规类参数包括帮助参数和日志信息参数,帮助参数用于输出monkey命令使用指导,日志信息参数将日志分为三个等级,级别越高,日 ...

  10. 【JZOJ5740】【20190706】幻想世界

    题目 小 $\omega $ 想要进行烟火表演,她一开始有\(n\)颗彗星和\(n\)颗陨石 如果小 \(\omega\) 有\(i\)颗彗星而没有陨石,那么她会消耗\(i\)颗彗星并得到\(a_i\ ...