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平台eclipse for C++开发环境搭建

    参考: 1 blog.sina.com.cn/s/blog_75f3c1f201014l5c.html 2 MinGW官方的安装说明 一.安装并配置MinGW 1 MinGW官网(www.mingw. ...

  2. 网页WEB打印控件制作-开放源码

    在WEB系统中,打印的确是比较烦人的问题,如果我们能制作一个属于自己的自定义的打印插件,那么我们在后续自定义打印的时候能随心所欲的控制打印,这样的效果对于程序员来说是非常开心的一件事件,本文将自己开发 ...

  3. IIS 平台NET无后缀名伪静态实现办法

    使用URLRewrite重写链接地址时,当无后缀时,总是找不到文件,不能使用.例如:http://shop.iccoo.cn/7648/ 无后缀形式(当然这个是可以的啦,只是看下链接形式) 当有后缀时 ...

  4. prototype.js简介

    prototype.js简介 2007-11-21 14:22 prototype.js是一个很强大的Javascript函数库,它可以让你很轻松的使用一些特效,实现AJAX的功能.虽然prototy ...

  5. Android学习起步 - Button按钮及事件处理

    按钮和文本框算是比较简单的控件了,以下主要讲按钮的事件响应,三种写法(匿名内部类响应事件.外部类响应事件.本类直接响应事件) 点击按钮后文本框中会显示 ”按钮被单击了”,先看效果: 以下是这个界面的布 ...

  6. android 评分条 RatingBar 使用及自定义

    一.先上效果图片: 第一个是自定义: 第二个是原生的: 二.atingBar 介绍: RatingBar是基于SeekBar和ProgressBar的扩展,用星型来显示等级评定.使用RatingBar ...

  7. centos7 下修改时区

    #timedatectl status //显示当前设置 #timedatectl list-timezones //列出时区 #timedatectl set-timezone Asia/Shang ...

  8. 浅谈oracle10G spfile与pfile（转）

    转自:http://blog.csdn.net/onebigday/article/details/6108348,http://www.linuxidc.com/Linux/2012-11/7371 ...

  9. Spring 之注解事务 @Transactional

    众所周知的ACID属性:  原子性(atomicity).一致性(consistency).隔离性(isolation)以及持久性(durability).我们无法控制一致性.原子性以及持久性,但可以 ...

  10. hibernate中的cascade和inverse

    以Student和class为例,一个Student对应一个class,一个class对应多个Student. Student.hbm.xml <?xml version="1.0&q ...