一：通过弹性布局
<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. 为什么sudo执行命令还是会提示权限不够

    安装openstack 的过程中需要执行以下命令,虽然使用了sudo,但是依然提示权限不够 $ sudo echo "deb http://ubuntu-cloud.archive.cano ...

  2. python高级（一）—— python数据模型(特殊方法)

    本文主要内容 collections.namedtuple __getitem__ 和 __len__ __repr__和__str__ __abs__.__add__和__mul__ __bool_ ...

  3. python lambda匿名函数 用法

    语法 lambda argument_list: expression argument_list是参数列表 expression是一个关于参数的表达式.表达式中出现的参数需要在argument_li ...

  4. docker 容器container运行后，如何进入容器内部？

    docker exec -ti  容器ID  /bin/bash

  5. Windows搭建Go语言环境·

    对于Windows用户,Go语言提供两种安装方式(源码安装除外): .MSI安装:程序会自动配置你的安装 .ZIP安装:需要你手动设置一些环境变量 一.MSI安装 1.下载安装包(根据操作系统选择相应 ...

  6. Python3.0版本 从听说python可以做爬虫到自己第一成功做出爬虫的经历

    前言 我自己是个python小白,工作也不是软件行业,但是日常没事时喜欢捣鼓一些小玩意,自身有点C语言基础. 听说python很火,可以做出爬虫去爬一些数据图片视频之类的东东,我的兴趣一下子就来了.然 ...

  7. Java中String与Date格式之间的转换

    转自:https://blog.csdn.net/angus_17/article/details/7656631 经常遇到string和date之间的转换,把相关的内容总结在这里吧: 1.strin ...

  8. inline-block BUG问题

    使用inline-block会使父元素高度不正常,要慎用!!!可以给父元素添加font-size:0解决,或者使用用float或者flex布局.

  9. myEclipse修改字体大小

  10. 一分钟看懂Docker的网络模式和跨主机通信

    文章转载自:http://www.a-site.cn/article/169899.html   Docker的四种网络模式Bridge模式 当Docker进程启动时,会在主机上创建一个名为docke ...