CSS布局中的水平垂直居中

各位好，先说两句题外话。今天是我开通博客园的博客第一天，虽然我申请博客园的账号已经有一年半了，但是由于各种原因迟迟没有开通自己的博客。今天非常有幸开通博客，在此也写一篇关于前端开发布局中经常用到的水平垂直居中的总结。第一次写博客，可能会存在有的地方表述不是那么清晰明了还请各位多多见谅。

废话不多说了，下面进入主题：下面的例子父元素div 高600px   宽800px， 子元素div的高400px 宽300px;

  1. 知道父元素div的宽和高，子元素在父元素中水平垂直居中
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>示例1</title>

     <style type="text/css">

         .parent{

             width: 800px;

             height: 600px;

             background-color: #bbbbc2;

             overflow: hidden;

         }

         .child{

             width: 400px;

             height: 300px;

             margin: 150px 200px;

             text-align: center;

             font-size: 30px;

             color: red;

             background-color: #616161;

         }

     </style>

 </head>

 <body>

 <div class="parent">

     <div class="child">示例1</div>

 </div>

 </body>

 </html>

简单解释一下，这种方法是设置子元素的外边距达到水平垂直居中的效果，效果图如下：

2.  知道父元素div的宽和高，子元素在父元素中水平垂直居中（方法2）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>示例2</title>

    <style type="text/css">

        .parent{

            width: 800px;

            height: 600px;

            background-color: #bbbbc2;

            overflow: hidden;

        }

        .child{

            width: 400px;

            height: 300px;

            margin: 150px auto;

            text-align: center;

            font-size: 30px;

            color: red;

            background-color: #616161;

        }

    </style>

</head>

<body>

<div class="parent">

    <div class="child">示例2</div>

</div>

</body>

</html>

示例2的效果和示例1的效果一样，就不截图占用篇幅了，大家可以自己试一下；

3.  知道父元素div的宽和高，子元素在父元素中水平垂直居中（方法3）

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>示例3</title>

     <style type="text/css">

         .parent{

             position: relative;

             width: 800px;

             height: 600px;

             background-color: #bbbbc2;

             overflow: hidden;

         }

         .child{

             position: absolute;

             width: 400px;

             height: 300px;

             left: 200px;

             top: 150px;

             text-align: center;

             font-size: 30px;

             color: red;

             background-color: #616161;

         }

     </style>

 </head>

 <body>

 <div class="parent">

     <div class="child">示例3</div>

 </div>

 </body>

 </html>

简单解释一下，其中我将父元素采用相对定位，子元素采用绝对定位，子元素设置left 和 top 的距离即可达到水平垂直居中的效果

4.  知道父元素div的宽和高，子元素在父元素中水平垂直居中（方法4）

 1 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>示例4</title>

     <style type="text/css">

         .parent{

             position: relative;

             width: 800px;

             height: 600px;

             background-color: #bbbbc2;

             overflow: hidden;

         }

         .child{

             position: absolute;

             width: 400px;

             height: 300px;

             left: 50%;

             top: 50%;

             margin-top: -150px;

             margin-left: -200px;

             text-align: center;

             font-size: 30px;

             color: red;

             background-color: #616161;

         }

     </style>

 </head>

 <body>

 <div class="parent">

     <div class="child">示例4</div>

 </div>

 </body>

 </html>

简单说一下，left和top采用百分比的方式取值，基数是对应父元素的宽和高。

5.  知道父元素div的宽和高，子元素在父元素中水平垂直居中（方法5）

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>示例5</title>

     <style type="text/css">

         .parent{

             position: relative;

             width: 800px;

             height: 600px;

             background-color: #bbbbc2;

             overflow: hidden;

         }

         .child{

             position: absolute;

             width: 400px;

             height: 300px;

             left: 50%;

             top: 50%;

             transform: translate(-50%,-50%);

             text-align: center;

             font-size: 30px;

             color: red;

             background-color: #616161;

         }

     </style>

 </head>

 <body>

 <div class="parent">

     <div class="child">示例5</div>

 </div>

 </body>

 </html>

说一下，这种方法还是比较好的，translate(-50%,-50%)，这里使用到了2D转换，里面又用到了百分数，不过这个百分数是基于当前元素的宽和高的，这是我自己常用的一种方式

6.  知道父元素div的宽和高，子元素在父元素中水平垂直居中（方法6）

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>示例6</title>

     <style type="text/css">

         .parent{

             display: flex;

             justify-content: center;

             align-items: center;

             width: 800px;

             height: 600px;

             background-color: #bbbbc2;

         }

         .child{

             width: 400px;

             height: 300px;

             text-align: center;

             font-size: 30px;

             color: red;

             background-color: #616161;

         }

     </style>

 </head>

 <body>

 <div class="parent">

     <div class="child">示例6</div>

 </div>

 </body>

 </html>

解释一下，这里面用到了flex布局，此处就先不详细讲解，后续再写专门的文章进行讲解。

7.  知道父元素div的宽和高，子元素在父元素中水平垂直居中（方法7）

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>示例7</title>

     <style type="text/css">

         .parent{

             display: flex;

             width: 800px;

             height: 600px;

             background-color: #bbbbc2;

         }

         .child{

             width: 400px;

             height: 300px;

             margin: auto;

             text-align: center;

             font-size: 30px;

             color: red;

             background-color: #616161;

         }

     </style>

 </head>

 <body>

 <div class="parent">

     <div class="child">示例7</div>

 </div>

 </body>

 </html>

这里面也用到了flex布局，要听其中缘由，请听下回分解。

结束语：由于本人第一次写博客，多有不足，还请各位大神多多指教，谢谢！

flex布局参考文章：

阮一峰的文章  http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

CSS布局中的水平垂直居中的更多相关文章

  1. CSS布局：元素水平垂直居中

    CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...

  2. css布局------块元素水平垂直居中的四种方法

    HTML <div class="parent answer-1"> <div></div></div> CSS .parent { ...

  3. 用css让一个容器水平垂直居中

    阅读目录 方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:flex;align-items: cente ...

  4. css知识笔记：水平垂直居中（别只看，请实操！！！）

    css实现元素的水平垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目 ...

  5. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  6. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  7. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  8. 认识和理解css布局中的BFC

    认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Con ...

  9. DIV CSS布局中绝对定位和浮动用法

    转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...

随机推荐

  1. java删除文件

    public boolean deleteFile(String fileName) { File file = new File("D:/NovaPluto/xml/"+file ...

  2. Django RedirectView

    RedirectView作用是重定向一个指定,给定的Url.这个给定的Url可能包含有字典风格的字符串,因为关键字(词)会被改变,所以从这个Url中捕获的参数可能也会被修改,例如,Url中的“%”应该 ...

  3. java中的运算符

    1.      赋值运算符:  (=) 2.      算术运算符:  (+ ,- , * , /, %) 3.      逻辑运算符:  (&& ,||, !) 4.      关系 ...

  4. system verilog的一些总结（从其他博客复制来的）

    转载自 http://blog.sina.com.cn/s/blog_e7fec2630101f5t9.html SystemVerilog是一种硬件描述和验证语言(HDVL),它基于IEEE 136 ...

  5. http://paulgraham.com/arcfaq.html

    Why not use some other delimiter than parentheses?为什么不使用一些其他的分隔符比括号?We tried various possibilities. ...

  6. 委托、IOC全知道

    话说写代码已有数年,曾经花了很多时间,看了很多大牛的文章也是不能参透,日思夜想都没有理解的概念,通过不断的实践与学习,回过头来再看,总算有了一个清晰的理解与认识,也看到一句话说,最好的学习就是把别人教 ...

  7. PHP数组的常用函数

    在PHP中数组是种强大的数据类型,他可以做的事情很多,可以存储不同的数据类型在一个数组中,下面我们列出了数组常用的操作,排序,键名对数组排序等做法. /* 数组的常用函数  *  * 数组的排序函数 ...

  8. java 配置文件读取

    1.getResourceAsStream Class.getClassLoader.getResourceAsStream(String path) :默认则是从ClassPath根下获取,path ...

  9. spring 定时器Quartz

    一.Quartz是什么 二.  核心接口 scheduler  --- 核心调度器 Job  --- 任务 JobDetail  --- 任务描述 Tigger  --- 触发器 三 . 核心接口之间 ...

  10. java 在linux环境下写入 syslog 问题研究

    1.Syslog 在Unix类操作系统上,syslog广泛应用于系统日志.syslog日志消息既可以记录在本地文件中,也可以通过网络发送到接收syslog的服务器.接收syslog的服务器可以对多个设 ...