在web页面布局中居中是我们常遇到的情况，而居中分为水平居中与垂直居中

文本的居中

CSS中对文本的居中做的非常友好，我们是需要text-align, line-height 两个属性就可以控制文本的水平以及垂直居中

<head>

    <style type="text/css">

        .text {

            width: 200px;

            height: 200px;

            border: 1px solid green;

            text-align: center;

            line-height: 200px;

        }

    </style>

</head>

<body>

    <div class="text">文本的水平垂直居中</div>

</body>

</html>

注意：line-height属性控制文本的垂直方向居中时 只使用单行文本的情况，多行文本时不能采用次方法

元素的居中

在CSS 中对于元素的居中，相信写过CSS的同学对于其中的垂直居中都觉得非常苦恼，下面我们来看下实现居中的几种方法

方法一：

使用display:table-cell 来居中，通过display:table-cell 来把他模拟成一个表格的单元格，利用表格的居中特性

<head>

    <style type="text/css">

        .parent {

            display: table-cell;

            width: 200px;

            height: 200px;

            vertical-align: middle;

            text-align: center;

            border: 1px solid red;

        }

        .child {

            display: inline-block;

            background-color: #33F;

        }

    </style>

</head>

<body>

    <div class="parent">

        <div class="child">元素的水平居中</div>

    </div>

</body>

</html>

注意：当前方法兼用 IE8+ 谷歌，火狐等

方法二：

使用绝对定位来居中，原理为设置定位元素的left与top为50%，但是这时候元素还不是居中的，因为坐标计算是根据元素的左上角的顶点计算的

所以相对中间的位置偏移了元素宽度/高度一半的距离，不过我们只需要设置元素的margin-top,margin-left 为负值就行了，值为元素宽/高的一半

<head>

    <style type="text/css">

        .parent {

            position: relative;

            width: 200px;

            height: 200px;

            border: 1px solid green;

        }

        .child {

            margin-left: -50px;

            margin-top: -50px;

            position: absolute;

            top: 50%;

            left: 50%;

            width: 100px;

            height: 100px;

            background-color: #33F;

        }

    </style>

</head>

<body>

    <div class="parent">

        <div class="child"></div>

    </div>

</body>

</html>

注意： 此方法只能使用宽度高度已知的元素

方法三：

另一种绝对定位的方法

<head>

    <style type="text/css">

        .parent {

            position: relative;

            width: 200px;

            height: 200px;

            border: 1px solid green;

        }

        .child {

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            margin: auto;

            width: 50px;

            height: 50px;

            background-color: #33F;

        }

    </style>

</head>

<body>

    <div class="parent">

        <div class="child"></div>

    </div>

</body>

</html>

注意：此方法也是只适用于有元素有固定宽高的情况，而且只支持IE9+ 谷歌，火狐等符合w3c标准的“现代浏览器”

CSS布局---居中方法的更多相关文章

  1. CSS布局——居中

    参考文章1.CSS布局奇淫技巧之--各种居中 2.http://www.imooc.com/article/2235 1.行内元素水平居中text-align:center对图片,按钮,文字等行内元素 ...

  2. CSS布局居中

    1.把margin设置为auto,此方法只能进行水平的居中,且对浮动元素或绝对定位元素无效.

  3. css元素居中方法

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

  4. ****CSS各种居中方法

    水平居中的text-align:center 和 margin:0 auto   这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素.他们起作用的首要条件是子元素必须没有被flo ...

  5. 【CSS】css各种居中方法

    水平居中的text-align:center 和 margin:0 auto   这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素.他们起作用的首要条件是子元素必须没有被flo ...

  6. css 元素居中方法

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

  7. [转载]CSS各种居中方法

    水平居中的text-align:center 和 margin:0 auto   这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素.他们起作用的首要条件是子元素必须没有被flo ...

  8. css中居中方法小结

    ---恢复内容开始--- 1.文字垂直居中 .header_nav-item{ height:38px; line-height:38px; } 即文字所在模块的高度和行高设置成一样的! 2.块元素垂 ...

  9. 用css布局的方法实现如果字符超过一定长度就显示成省略号

    以前实现这种效果需要在程序里判断字符的长度,如果长度大于多少个字符,就截取字符,用省略号代替,而且是在服务器处理的,现在只需要用css的属性来操作,简单.实用.节省性能.不用做过多的程序判断.节约开发 ...

随机推荐

  1. 转 Mac 使用ab性能测试工具

    Mac 使用ab命令进行压测 1.在Mac中配置Apache ①启动Apache,打开终端 sudo apachectl -v 如下显示Apache的版本 sudo apachectl start 这 ...

  2. Net使用RdKafka引发异常RdKafka.Internal.LibRdKafka 的类型初始值设定项引发异常

    在Net中VS2015用RdKafka组件开发消息发布和消费,引发下面的异常 RdKafka.Internal.LibRdKafka 的类型初始值设定项引发异常System.TypeInitializ ...

  3. centos 7 linux 安装与卸载 tomcat 7

    一.声明 本文采用操作系统版本: Centos 7 Linux系统 版本源:CentOS-7-x86_64-DVD-1708.iso 官网下载地址:http://isoredirect.centos. ...

  4. tcp关闭状态详解

    tcp关闭连接不区分客户端和服务端,哪一端口可以主动发起关闭连接请求.所以为了描述方便,描述中的“主动方”表示主动发起关闭连接一方,“被动方”表示被动关闭连接一方. 1. tcp关闭连接状态转换 上图 ...

  5. SpringBoot(9) SpringBoot整合Mybaties

    一.近几年常用的访问数据库的方式和优缺点 1.原始java访问数据库 开发流程麻烦 <1>注册驱动/加载驱动 Class.forName("com.mysql.jdbc.Driv ...

  6. Java反射，注解，以及动态代理

    Java反射,注解,以及动态代理 基础  最近在准备实习面试,被学长问到了Java反射,注解和动态代理的内容,发现有点自己有点懵,这几天查了很多资料,就来说下自己的理解吧[如有错误,望指正] Java ...

  7. [转]用virtualBox安装centos设置网络和通信

    本文转自:https://blog.csdn.net/hsl_1990_08_15/article/details/51644451 具体的安装和在VM Ware中安装的方式大同小异 安装好后我们设置 ...

  8. final关键字。

    final关键之代表最终,不可变的. 用法: 1.修饰类 2.修饰方法 3.修饰局部变量. 4.修饰成员变量. 修饰类: 不能有任何子类.(太监类) public final class MyClas ...

  9. c# 如果一个对象的值为null，那么它调用扩展方法时为甚么不报错

    如果一个对象的值为null,那么它调用扩展方法时会报错吗? Person p = null ; p.ExtendMethod(); 上述代码出现的情况不会报错,刚开始遇到这种情况时很纳闷,就去问了大牛 ...

  10. 从零开始学安全(四)●Vmware CentOS 7 添加静态ip联网

    一.虚拟网络编辑器配置 1.VMnet8设置(不需要改动) 2.NAT设置(不需要改动) 3.DHCP设置(CentOS IP地址段设置,不需要改动) 二.虚拟机设置(网络适配器选择NAT模式) 三. ...