html结构:

    <div class="center">确定宽高水平垂直居中</div>
<div class="center2">不确定宽高水平垂直居中</div>
<div class="center3">确定宽高水平垂直居中2</div>
<div class="center4"><span>flex水平垂直居中</span></div>
<div class="center5"><span>table-cell水平垂直居中</span></div>

css样式:

    .center{
position: absolute;
background: blue;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
.center2{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -150%);
background: red;
}
.center3{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: 100px;
height: 100px;
background: green;
}
.center4{
background: orange;
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
.center5{
display: table-cell;
vertical-align: middle;
text-align: center;
height: 300px;
width: 400px;
background: red;
}

PS:仅作记录.

CSS多种方式实现元素水平垂直居中的更多相关文章

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

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

  2. CSS中怎么设置元素水平垂直居中?

    记录怎么使用text-align与vertical-align属性设置元素在容器中垂直居中对齐.text-align与vertical-align虽然都是设置元素内部对齐方式的,但两者的用法还是有略微 ...

  3. css 文字和子元素水平垂直居中

    关于水平垂直居中,这是一个很简单的问题,但是很多时候,往往简单的东西,反而做不出来.这就是基础不扎实的缘故吧,我参照一些资料,总结了水平垂直居中的几种方法如下: 1 .文字水平垂直居中 这个比较简单, ...

  4. css 常用的绝对定位元素水平垂直居中的方法

    两种方法都能够实现: 1. div { height:80%; /*一定要设置高度*/ overflow:hidden;/*建议设置*/ margin: auto; position: absolut ...

  5. css实现块级元素水平垂直居中的方法?

    父级给相对定位,子级给绝对定位,margin设置为auto,上下左右值设为0. 父级给相对定位,子级给绝对定位,设置left和top为50%,再向左和向上移动负的子级一半. 父级设置display:f ...

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

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

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

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

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

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

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

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

随机推荐

  1. Lomsat gelral

    题目描述 You are given a rooted tree with root in vertex 11 . Each vertex is coloured in some colour. Le ...

  2. python自动化适应多接口的断言怎么做?

    最近做的接口自动化,遇到了很多模块的接口,返回的断言不太相同,在放在unnitest单元测试框架+ddt数据驱动,做参数时,发现不能只通过一个方式进行断言,那么,要怎么做才能做到适配当前所有接口的断言 ...

  3. springMVC+redis+redis自定义工具类 的配置

    1. maven项目,加入这一个依赖包即可, <dependency> <groupId>redis.clients</groupId> <artifactI ...

  4. 微服务架构攀登之路(五)之Go-micro入门

    一.go-micro入门 1. go-micro 简介 Go Micro 是一个插件化的基础框架,基于此可以构建微服务,Micro 的设计哲学是可插拔的插件化架构 在架构之外,它默认实现了 consu ...

  5. 局域网内部怎么安全接入U盘?

    准备工具: 内部专用U盘一个: 能连接外网的电脑(暂称"安全机")一个. 第一.安全机上安装360杀毒.360安全卫士或其它安全软件.并经常更新病毒库.木马库. 第二.外来U盘先通 ...

  6. Android过时方法替代

    managedQuery替换为cursorLoader example: uri = data.getData(); String[] proj = {MediaStore.Images.Media. ...

  7. HDC2021技术分论坛:组件通信、硬件池化,这些创新技术你get了吗?

    作者:ligang 华为分布式硬件技术专家,sunbinxin 华为应用框架技术专家 HarmonyOS是一款全新的分布式操作系统,为开发者提供了元能力框架.事件通知.分布式硬件等分布式技术,使能开发 ...

  8. after effects的xml格式工程文件aepx的格式分析(一)

    表面上看,AE的工程文件可以另存为xml格式,我们可以通过直接编辑XML来做一些事情. 很可惜,通过aepx文件修改AE工程,能做到的非常有限.理由是: 1.重要的属性都放在了标签的bdata这个属性 ...

  9. Zotero群组新建后无法显示

    我们新建Zotero的群组后无法显示. 此时需要点击文献库,就刷新了. 修改Zotero的群组后无法显示修改后的名称 点击同步即可同步内容.

  10. 小程序循环时的item问题

    平常在做小程序时,比如循环渲染数据时,如果有多个数据层次,一般都会这样 wx:for-item=item2,它的意思只是简单的起了一个wx:for循环值的别名,不是表示循环item2,index2同理 ...