一：通过弹性布局
<style>

         #container .box{

            width: 80px;

            height: 80px;

            position: absolute;

            background:red;

        }

        #container{

            background:green;width: 250px;height: 250px;border: 1px solid khaki;

//下面三行是核心代码

            display: flex;

            justify-content: center;

            align-items: center; }

    </style>

</head>

<body>

<div id="container"> <div class="box">

</div></div>

  效果如下：

二、通过绝对定位来水平居中一个块级元素，（知道元素宽度，高度）。

<style>

             #container .box{

                width: 80px;

                height: 120px;
　　　　　　　　  background:red;

                position: absolute;

                top: 50%;

                left: 50%;

                background:red;

                margin-top: -60px;        // 这二行可以用 transform: translate(-50%,-50%);代替分别对应x,y即宽高的一半

                margin-left: -40px;

            }

            #container{

             position:relative;background:green;width: 250px;height: 250px;border: 1px solid khaki;

        </style>

    </head>

    <body>

        <div id="container">  <div class="box">

        </div></div>
效果图如下：

垂直居中单行文字

<div>

<span>这是居中的单行文字<span>

</div>

<style>

div{width:300px;height:200px;background:#66f;color:white;}

span {line-height:200px}

</style>
//这里通过父元素高度(height)与文字行高（line-height）相等做到的

效果图：

多行文字的居中

<div>

<p>这是居中的多行文字

这是居中的多行文字

这是居中的多行文字

这是居中的多行文字<p>

</div>

<style>

div{width:300px;height:200px;background:#66f;color:white;

display:table

}

p{vertical-align:middle;display:table-cell}

</style>
//这里通过为父元素设置display:table，把多行文字用p元素包裹然后运用只对表格单元格有效的vertical-align:middle的css规则，就能完美居中
//此效果还可以用它来居中图片。

效果图：

css 元素居中各种办法的更多相关文章

  1. css 元素居中

    css 4种常见实现元素居中的办法: 1.通过 margin 属性调整 : { position: absolute; top: 50%; left: 50%; margin-left: 盒子的一半: ...

  2. Css元素居中设置

    你对DIV CSS居中的方法是否了解,这里和大家分享一下,用CSS让元素居中显示并不是件很简单的事情,让我们先来看一下CSS中常见的几种让元素水平居中显示的方法. DIV CSS居中 用CSS让元素居 ...

  3. CSS元素居中汇总

    总结实现不同类型元素居中的几种方法: 一.把margin值设置为auto(实现水平居中) 可以实现元素水平居中对齐 原理:使  margin-left=margin-right  如果设置  marg ...

  4. CSS元素居中的常用方法

    只有普通流和绝对定位的元素可以设置居中,浮动元素是不存在居中的. 1.块级元素居中 1) 普通流元素(position : static 或 position : relative) 水平居中:{ m ...

  5. css元素居中

    水平居中 若为行内元素,对其父元素用text-align:center即可: 若为块元素(无浮动),则一般有两种方法可实现对其的水平居中,一为margin:0 auto;二为通过css计算函数calc ...

  6. css 元素居中方法

    目前知道有两种方法 方法一:主要适用于元素未设定高度的情况下. 直接上代码 html: <div class="nav-content"> <ul ng-clic ...

  7. css元素居中方法

    几种居中方式,分情况使用: 1.已知父盒子宽度,子盒子宽度: div{ transform: translate(-50%,-50%); //margin-left: - 自身宽度一半: positi ...

  8. （前端）面试300问之（2）CSS元素居中【水平、垂直、2者同时居中】

    一 仅水平居中 1 行内元素 1)给父元素添加 text-align:center 即可 <div class="parent"> <span class=&qu ...

  9. css元素居中的几种方式

    1.水平居中 <div style="width:200px;margin:0 auto;background-color: yellow;">水平居中</div ...

随机推荐

  1. @functools.wrapes

    保证被装饰函数的__name__属性不变

  2. JQ的ready()方法与window.onload()的区别与联系

    JQ的ready()与window.onload()方法都是在文档加载完毕之后才会被触发的方法,但它们之间的区别也是很明显的. 1.区别与联系:   $(document).ready() windo ...

  3. 在makefile中打印错误或警告信息

    在makefile中打印警告或者错误消息的方法: $(warning xxxxx) 或者 $(error xxxxx) 输出变量方式为: $(warning $(XXX))

  4. 如果你创建了类似于下面的 Twitter 元素，那么它相关的类定义是啥样子的？

    代码: <Twitter username='tylermcginnis33'> {(user) => user === null ? <Loading /> : < ...

  5. Python用于http/https接口自动化

    本接口自动化框架主要用到的类: 1. unittest:组织测试用例 2. requests:http/https请求 3. HTMLTestRunner:生成测试报告 4. Dingtalkchat ...

  6. 文献综述十四：基于Oracle11g的超市进销存管理系统设计与实现

    一.基本信息 标题:基于Oracle11g的超市进销存管理系统设计与实现 时间:2016 出版源:技术创新 文件分类:对数据库的研究 二.研究背景 为超市设计开发的超市管理系统,采用的是 VC+ Or ...

  7. vscode用yuml画类图

    vscode用yuml画类图 最近在找画类图的工具,发现vscode一款插件很好用,还支持markdown.vscode插件中直接搜索yuml安装即可. 文件后缀.yuml. 文件开头第一行这样写// ...

  8. JS及Dom示例 | 分级菜单折叠

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. fix the issue that disk space is not the size that aws ec2 have.

    在申请aws ec2时,按照向导,在选择存储的时候默认硬盘大小是 8 G,这时候可以根据自己的需要输入一个合适的数字,例如100.完成向导并启动ec2 instance 后登陆机器.使用命令: df ...

  10. python API url 级联生成

    参考了一下公司 python 达人 rpc 接口级联 api 调用 rpc.api.users.list() rpc.api.login(username='',password='') rpc['a ...