一：通过弹性布局
<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. PHP用curl远程下载图片

    function http_get_data($url){ $ch = curl_init (); curl_setopt ( $ch, CURLOPT_CUSTOMREQUEST, 'GET' ); ...

  2. UltraFast设计法实践(1) -- 初始设计检查

    目录 1. report_failfast 1.1 命令使用 1.2 优化 1.3.总结 2.report_timing_summary 3. report_methodology 4. 总结 5.遗 ...

  3. UML-6.2-用例-用例模型/用例/场景关系

    参与者:具有某些行为的人或事物.如上一章中的收银员. |_主要参与者:收银员. |_协助参与者:程序(自动付费.帮收银员验证输入要素) |_幕后参与者:政府等(电子签章取证找公证机构) 用例:一组相关 ...

  4. Javascript 定时器的使用陷阱 (setInterval)

    setTimeout(function(){ // 其他代码 setTimeout(arguments.callee, interval); }, interval); setInterval会产生回 ...

  5. 映射网络驱动器 net use

    net use z: \\10.1.1.1\Software 12345678 /user:admin net use z: /del 然后文件夹Software权限

  6. Python操作Excel（将父子级表头生成树状结构）

    import re class Node: ''' 容器,用来存储前后节点信息 ''' __slot__=[] def __init__(self,val,next_,pre,name,no): se ...

  7. decode 和 encode 区别

    字符串在Python内部的表示是unicode编码,因此,在做编码转换时,通常需要以unicode作为中间编码,即先将其他编码的字符串解码(decode)成unicode,再从unicode编码(en ...

  8. proxy的作用

    get() get方法用于拦截某个属性的读取操作,可以接受三个参数,依次为目标对象.属性名和 proxy 实例本身(严格地说,是操作行为所针对的对象),其中最后一个参数可选. get方法的用法,上文已 ...

  9. DBA 需要掌握的知识框架及工作内容

    知识框架 1.  数据库的工作原理以及体系结构 2.  数据库管理(管理数据库和数据库对象) 3.  数据库备份和恢复 4.  数据库故障处理 5.  数据库补丁安装及升级 6.  数据库性能 工作内 ...

  10. (转)linux exec与重定向

    原文:http://xstarcd.github.io/wiki/shell/exec_redirect.html linux exec与重定向 exec和source都属于bash内部命令(buil ...