在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. Ocelot简易教程（七）之配置文件数据库存储插件源码解析

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9852711.html 上篇文章给大家分享了如何集成我写的一个Ocelot扩展插件把Ocelot的配置存储 ...

  2. 总结jenkins Android自动打包遇到的坑

    一.ndk-build报错 [root@hejianlai-jenkins LearnGradle]# ndk-build /usr/local/android-ndk-r8/ndk-build: / ...

  3. Django-用户模块与权限系统相关

    Django的用户模块与权限系统 Django的用户系统都提供哪些功能: 提供用户模块(User Model) 权限验证(默认添加已有模块的增加删除修改权限) 用户组与组权限功能 用户鉴权与登录功能 ...

  4. Mac下快速搭建PHP开发环境

    最近做了一个后端的项目,是用PHP+MySQL+Nginx做的,所以把搭建环境的方法简单总结一下. 备注: 物料:Apache/Nginx+PHP+MySQL+MAMP Mac OS 10.12.1 ...

  5. 微信小程序ios上时间字符串转换为时间戳时会报错，在开发工具上和安卓手机上运行成功

    给定一个时间字符串  var time="2017-02-27 16:42:53" js有三种转换为时间戳的方法: 1.var timestamp = Date.parse(tim ...

  6. 面向连接的TCP概述

    TCP连接概述     TCP是因特网运输层面向连接的(connection-oriented)可靠运输协议.之所以说它是面向连接的是因为  一个应用进程向另外一个应用进程发送数据之前,两个进程必须先 ...

  7. 监控MySQL组复制

    使用 Perfomance Schema 中的表来监控组复制,假定你的MySQL编译时已经启动了 Performance Schema 表.组复制将添加如下两张 P_S 表: performance_ ...

  8. 南大算法设计与分析课程复习笔记(2)L2 - Asymptotics

    一.几种比较复杂度的符号 数据结构有描述,相关严格数学定义也不想说了,就这么过了吧. 二.最大子数组的几种解决方法 从最复杂的暴力解法过渡到最简单的动态规划 解析和代码见这里:http://www.c ...

  9. Spring Day 2

    **Spring框架的IOC之注解方式的快速入门** 步骤一:导入注解开发所有需要的jar包 步骤二:创建对应的包结构,编写Java的类:接口到实现类 步骤三:在src的目录下,创建applicati ...

  10. WebAPI参数传值string转bool，int转bool相关问题

    今天在公司同事问了我一个问题,用postman传递json字符串给接口,接口获取到的值不正确. 我就看到下面的json数据: { "Mark":"1" } 接口 ...