一：通过弹性布局
<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. 使用FFmpeg进行视频抽取音频，之后进行语音识别转为文字

    1.首先需要下载FFmpeg: 2.Gradle依赖 def void forceVersion(details, group, version) { if (details.requested.gr ...

  2. [转] Jenkins pipeline 踩坑集合

    [From] https://testerhome.com/topics/10328 前言 最近由于项目需要,接触到了Jenkins 2.0版本,其中最重要的特性就是提供了对pipeline的支持.简 ...

  3. 阿里实人认证 .net 准备工作

    1.H5+服务端接入 认证方案 https://help.aliyun.com/document_detail/61362.html?spm=a2c4g.11186623.2.37.35247556k ...

  4. 转 OGG 部署阶段常见问题

    序号 问题 解决方案1 "2019-04-13 20:23:55 ERROR OGG-00868 Oracle GoldenGate Capture for Oracle, e_db1.pr ...

  5. Java基础29-子父类中的成员变量

    /* 成员: 1.成员变量 2.函数 3.构造函数 变量: this 代表当前对象的引用 this.变量 首先在本类中找所需要的变量,如果没有找到再父类中找. super 用于访问当前对象的父类成员, ...

  6. Net操作Excel，不依赖服务器端环境配置（终极方法NPOI）转。

    这是起因,为什么会需要用到这个,主要是分析了一下为什么从oledb那个方式换成这个方式.文章见链接 http://www.cnblogs.com/Jerseyblog/p/6410703.html 前 ...

  7. 彻底解决matplotlib中文乱码问题(转)

    彻底解决matplotlib中文乱码问题 1.环境查看a.系统版本查看[hadoop@p168 ~]$ cat /etc/redhat-releaseCentOS Linux release 7.2. ...

  8. Robot Framework（Databaselibrary库操作）

    1.安装 DatabaseLibrary 库 DatabaseLibrary 下载地址:https://pypi.python.org/pypi/robotframework-databaselibr ...

  9. selenium+python(数据驱动测试)

    自动化领域的两种驱动,对象驱动与数据驱动 数据驱动:测试数据的改变引起执行结果的改变 叫 数据驱动 关键字驱动:测试对象名字的改变起引起测试结果的改变 叫 关键字驱动 1 .读取文件参数化   以百度 ...

  10. 没有循环的JavaScript

    有些文章中提到过,缩进(并不能特别准确的)说明了代码的复杂程度.我们想要的是简单的JavaScript.之所以层层缩进,是因为我们用抽象的方式解决问题.但要选用什么抽象方法呢?截止目前,我们没有在特定 ...