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. windows apache24 php Call to undefined function curl_init

    check dll files in dir: Apache24/bin libssh2.dll, ssleay32.dll, libeay32.dll http://nz.php.net/manua ...

  2. Microsoft Dynamics AX 2012: How to get Company,Customer and Vendor address in AX 2012

    Scenario:  “How to get Addresses of “Customer, Vendor and Company” 1)      First we need to identify ...

  3. ThrottleAttribute

    /// <summary> /// Decorates any MVC route that needs to have client requests limited by time. ...

  4. [ json editor] 如何在网页中使用Json editor 插件

    [目的] 在自己的网页上交由用户进行json的可视化编辑 [难点]1.json中含有递归嵌套的数组和对象 2.json中的基本值类型有数字.字符串和布尔型 [方法]使用daviddurman的Flex ...

  5. C# 6.0 特性

    C#6.0主要提供了一些语法糖,另外还提供了新的编译器Roslyn地址https://github.com/dotnet/roslyn 一下列举几个新增的语法糖: 1.构造一个类: public cl ...

  6. 服务器RAS性能

    服务器的安全性能要求非常高,主要体现在RAS性能上.RAS性能指的是机器的可靠性(Reliability).可用性(Availability)和可服务性(Serviceability).RAS能力主要 ...

  7. http国际化模拟请求

    现在好多系统都有国际化的需求.不同国家的人读到不同的语言数据.那么怎么模拟请求的时候区分是哪个国家的语言信息,代码说明. HttpPost methed = new HttpPost("模拟 ...

  8. Android test---robotium----简单例子

    1.首先新建一个要被测试的工程,命名为”robotium“:一个很简单的Android 应用程序:主页面只有个 TextView 控件: 2. 在建一个用于测试的工程 ,命名为”robotiumTes ...

  9. 施耐德Sepam 40系列备自投逻辑

    1# 主供: VL1= NOT PVTS_1_3 V1 = VL1 AND P59_1_7 AND P59_1_8 AND P59_1_9VL2 = VL1 AND I12 AND I21 AND I ...

  10. JS定时程序，设定一个一直刷新，又时间间隔的js，读取当前的时间并显示

    <!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...