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 判断文件夹、文件是否存在、否则创建文件夹

    1.判断文件是否存在,不存在创建文件 File file=new File("C:\\Users\\QPING\\Desktop\\JavaScript\\2.htm"); if( ...

  2. pyqt5安装

    花了一天时间,终于是装好了. 这东西硬是把我从Python2掰弯成了Python3 本来用pip安装了一个pyqt,但是后来才发现,这是个x64版本的. 我不知道啊! 我以为是还要装qt5 所以我把q ...

  3. 培训第四天-----jdbc连接oracle

    oracle链接数据库并向tableone插入中一条数据 package com.zjw.db; import java.sql.Connection; import java.sql.DriverM ...

  4. [REP]AWS Regions and Availability Zones: the simplest explanation you will ever find around

    When it comes to Amazon Web Services, there are two concepts that are extremely important and spanni ...

  5. ndk-stack 使用（分析native代码stack）

    简介: ndk r6 版本之后开始提供该功能. 作用: ndk-stack可以把不认识的内存地址信息转换成可读的信息. 比如,把下列内容 I/DEBUG ( ): *** *** *** *** ** ...

  6. asp.net中插件开发模式说明

    第一定义接口 /// <summary>          /// 这是插件必须实现的接口,也是主程序与插件通信的唯一接口         /// 换句话说,主程序只认识插件里的这些方法  ...

  7. ant 介绍 http://blog.csdn.net/sunjavaduke/archive/2007/03/08/1523819.aspx

    转自: 本内容包含了Ant的历史简要介绍,Ant的功能以及Ant框架的介绍,并对下载安装使用Ant进行了示例介绍,同时通过一个Java程序讲解了Ant的基本使用方法. 1.       Ant简介:这 ...

  8. 详解rsync算法--如何减少同步文件时的网络传输量

    先看下图中的场景,客户端A和B,以及服务器server都保存了同一个文件,最初,A.B和server上的文件内容都是相同的(记为File.1).某一时刻,B修改了文件内容,上传到SERVER上(记为F ...

  9. 自动化测试 using System.Windows.Automation;

    frameworke3.0 及以上 using System.Windows.Automation; UIAutomationClient.dll UIAutomationClientsideProv ...

  10. 引用对象的使用和易产生bug的示例

    本文属原创,转载请注明出处:http://www.cnblogs.com/robinjava77/p/5481608.html  (Robin) QuoteTest(引用对象技巧) import ja ...