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 对EXCEL表格的处理

    都整蒙圈了 Cannot get a numeric value from a text cell 的处理,EXCEL表格里是数值型的处理 http://blog.csdn.net/ysughw/ar ...

  2. [SQL]Sql转至问题

    HRMS Name InsuranceMoney InsuranceName -------------------- -------------------- ------------------- ...

  3. java中的集合和区别

    Iterator接口是负责定义访问和遍历元素的接口 Connection接口存储了一组不唯一(允许重复)的无序对象 Set接口继承了Connection接口,主要用来存储一组唯一(不允许重复的),无序 ...

  4. Django中提示TemplateDoesNotExist？

    用的是1.9版本.需要在settings.py文件中设置TEMPLATES下的DIRS如下: TEMPLATES = [ { 'BACKEND': 'django.template.backends. ...

  5. git 源代码下载和安装(CentOS)

    1.阅读INSTALL文件 $ make configure ;# as yourself$ ./configure --prefix=/usr ;# as yourself$ make all do ...

  6. 安装过程中出现PKG_CONFIG_PATH的问题解决方法

    在安装开源软件的过程中, 经常会碰到提示配置PKG_CONFIG_PATH路径, 或者直接提示没有安装某某库, 但是我们已经安装了啊. 其实造成这种情况的原因很简单, 就是安装的目录不能被依赖程序找到 ...

  7. iOS－多线程 ，整理集锦，多种线程的创建

    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launc ...

  8. 创建DAO模式的步骤

    1.建立数据库epet 2.创建实体类,和相对应的数据库是对应的 3.创建Dao的基类接口类BaseDao 4.创建Dao的实现类BaseDaoImpl 5.创建具体表的Dao类 6.创建具体表的Da ...

  9. 在树莓派2代B型/3代 上安装Fedora23 - Installing Fedora 23 on Raspberry Pi 2 model B or Raspberry Pi 3

    本文主要用于记录安装过程,以便日后查阅回顾. 之前在自己的树莓派上运行的一直是通过NOOB安装的Raspbian,但是本人平时更喜欢用Fedora作为开发和使用环境,而且Raspbian上的软件包通常 ...

  10. HandlerThread和IntentService

    HandlerThread 为什么要使用HandlerThread? 我们经常使用的Handler来处理消息,其中使用Looper来对消息队列进行轮询,并且默认是发生在主线程中,这可能会引起UI线程的 ...