一：通过弹性布局
<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. C#之集合

    数组(http://www.cnblogs.com/afei-24/p/6738128.html)的大小是固定的.如果元素的个数是动态的,就应使用集合类. 列表(http://www.cnblogs. ...

  2. 榨取kkksc03 多维dp

    榨取kkksc03 多维dp 题面:洛谷 P1855 榨取kkksc03 一道简单的动态规划,背包再加一维费用,首先可以易得三维动态规划转移方程 \[ dp[i][j][w]=\left\{ \beg ...

  3. WebFrom页面绑定数据过于冗长的处理方法

    嘛 这个是当时写完东西之后 功能没什么问题 但是由于页面绑定的数据太长 破坏了整体的样式(对于本人来说 样式就是浮云....) 所以测试就跟我说必须弄好看点 于是乎  我就找到了下面这种方法 因为我这 ...

  4. Q394 字符串解码

    给定一个经过编码的字符串,返回它解码后的字符串. 编码规则为: k[encoded_string],表示其中方括号内部的 encoded_string 正好重复 k 次.注意 k 保证为正整数. 你可 ...

  5. 转 RMAN: RAC Backup, Restore and Recovery using RMAN

    PURPOSE The purpose of this document is to give a quick guide for using RMAN on RAC databases. We wi ...

  6. 1、The Fctory Pattern（工厂模式：解决对象创建问题）

    The Fctory Pattern  处理对象创建,客户端可以申请一个对象而不用知道对象被那个class创建.可以方便地解耦对象的使用和创建,有两种实现,工厂方法和抽象工厂. Method(工厂方法 ...

  7. 06-oracle 通用函数

    --nvl(数字|列名,默认值) 数字或列的值为null显示为0,不为null时显示原值 --nvl2(comm,comm,0)如果comm不为null则显示comm,为null则显示0 --null ...

  8. sql server 保留小数，向上保留指定位数的小数，仅记录，勿看。

    比如 4.05 要取成 4.1 , 4.16 取成 4.2 ,4.5 取成 4.5 ,意思就是小数部分第二位不管是多少都丢掉然后加0.1,但是如果是 4.5 这样完整的就不需要处理. 可以像下面这么写 ...

  9. 《图解http协议》之HTTPs学习笔记

    对于IP协议,并不陌生.TP协议是TCP/IP协议簇中的核心协议,也是TCP/IP的载体.所有的TCP,UDP,ICMP及IGMP数据都以IP数据报格式传输.IP提供不可靠的,无连接的数据传送服务.I ...

  10. poj 2501 Average Speed

    Average Speed Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4842   Accepted: 2168 Des ...