经典的css布局有以下几种，下面分别用不同的方法进行实现且进行对比。

一、水平居中

　　水平居中布局指的是当前元素在父级元素的容器中，水平方向上显示的是居中的，有以下几种方式来完成布局：

　　1、margin:0 auto; text-align:center实现水平居中。

　　　　直接给子元素加上margin:0 auto; text-align:center来实现.实际中用的最多，但有一个小问题就是如果子元素里有文本内容，文本内容也会居中。

　　2、display:table或者是display:inline-block配合margin来实现

　　3、相对定位实现居中

　　4、绝对定位实现居中，使用绝对定位有一点就是父元素要加上相对定位

　　5、flex实现水平居中

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>css实现水平居中</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.  
  12.         .box1 {
  13.             width: 100%;
  14.             height: 100px;
  15.             background: beige;
  16.             /* position: relative; */
  17.  
  18.             /* display: flex;
  19.             flex-direction: column; */
  20.  
  21.             display: flex;
  22.         }
  23.  
  24.         .box2 {
  25.             width: 100px;
  26.             height: 100px;
  27.             background: greenyellow;
  28.             /* margin:0 auto;      第1种方式来水平居中
  29.             text-align: center; */
  30.  
  31.             /* display: table;
  32.             margin:0 auto;          第2种方式来水平居中 */
  33.  
  34.            /* position: relative;
  35.            left: 50%;
  36.             transform: translateX(-50%);   第3种方式来水平居中 */
  37.  
  38.             /* position: absolute;
  39.             left:50%;
  40.             transform: translateX(-50%);    第4种方式来水平居中 */
  41.  
  42.             /* align-self: center;              第5种方式来水平居中 */
  43.  
  44.             /* margin: auto;           第5种方式来水平居中,和display:flex配合使用 */
  45.         }
  46.  
  47.     </style>
  48. </head>
  49. <body>
  50.     <div class="box1">
  51.         <div class="box2">box2</div>
  52.     </div>
  53. </body>
  54. </html>

二、垂直居中

　　垂直居中布局指的是当前元素在父级元素的容器中，垂直方向显示是居中的，有以下几种方式来完成布局：

　　1、table-cell和vertical-align属性配合使用

　　　　　　给父元素添加display:table-cell;显示的效果等同于表格中的单元格（单元格的内容允许水平或者是垂直方向的对齐设置）　　

　　　　　　vertical-align:center;垂直方向上的居中

　　2、绝对定位和transform属性配合使用

　　　　　　这个要给父级一个相对定位

　　3、flex实现垂直居中

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>垂直居中</title>
  7.     <style>
  8.         * {
  9.             padding:0;
  10.             margin: 0;
  11.         }
  12.         .box1{
  13.             width: 100px;
  14.             height: 500px;
  15.             background-color: rgb(223, 223, 241);
  16.             /* display: table-cell;
  17.             vertical-align: middle;      第1种方法实现垂直居中 */
  18.  
  19.             /* position: relative; */
  20.  
  21.             /* display: flex;
  22.             flex-direction: column;
  23.             justify-content: center;     第3种方法实现垂直居中 */
  24.  
  25.         }
  26.         .box2{
  27.             width: 100px;
  28.             height: 100px;
  29.             background: greenyellow;
  30.             position: absolute;
  31.  
  32.             /* top:50%;
  33.             transform: translateY(-50%);   第2种方法实现垂直居中 */
  34.  
  35.         }
  36.     </style>
  37. </head>
  38.  
  39. <body>
  40.     <div class="box1">
  41.         <div class="box2">box2</div>
  42.     </div>
  43. </body>
  44.  
  45. </html>

三、居中布局

　　居中布局就是即水平居中又垂直居中

　　1、绝对定位加上transform实现居中布局

　　　　　　要给父级加上相对定位，还有一点问题就是兼容性的问题

　　　　　　要给父级元素加上：position:relative;

　　　　　　　　　子元素加上：position:absolute;top:50%;left:50% ;transform: translate(-50%,-50%);

　　2、table+margin来实现水平居中，table-cell和vertical-align实现垂直居中

　　　　　　有一点问题就是有可能会影响整体的布局效果没有绝对定位好

　　　　　　要给父级元素加上：display:table-cell;vertical-align:middle;

　　　　　　　　　子元素加上：display:table;margin:0 auto;　　　　　　

　　3、flex来实现水平垂直居中，它的作用最大

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>水平垂直居中</title>
  6.     <style>
  7.     *{
  8.         margin:0;
  9.         padding:0;
  10.     }
  11.     .box1{
  12.         width: 500px;
  13.         height: 500px;
  14.         background-color: greenyellow;
  15.  
  16.         /* position: relative;      第1种水平垂直居中方式*/
  17.         /* display: table-cell;    第2种水平垂直居中方式
  18.         vertical-align: middle;
  19.          */
  20.  
  21.          /* display: flex;
  22.          justify-content: center;   第3种水平垂直居中方式 */
  23.     }
  24.     .box2{
  25.         width: 100px;
  26.         height: 100px;
  27.         background-color: pink;
  28.  
  29.         /* position: absolute;   第1种水平垂直居中方式
  30.         top:50%;
  31.         left: 50%;
  32.         transform: translate(-50%,-50%); */
  33.  
  34.         /* display: table;          第2种水平垂直居中方式
  35.         margin: 0 auto; */
  36.  
  37.         /* align-self: center; 第3种水平垂直居中方式 */
  38.     }
  39.     </style>
  40. </head>
  41. <body>
  42.     <div class="box1">
  43.         <div class="box2">box2</div>
  44.     </div>
  45. </body>
  46. </html>

ccs之经典布局（一）（水平垂直居中）的更多相关文章

  1. ccs之经典布局（二）（两栏，三栏布局）

    接上篇ccs之经典布局(一)(水平垂直居中) 四.两列布局 单列宽度固定,另一列宽度是自适应. 1.float+overflow:auto; 固定端用float进行浮动,自适应的用overflow:a ...

  2. Flexbox制作CSS布局实现水平垂直居中

    Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  & ...

  3. ccs之经典布局（三）（等分，等高布局）

    接上篇ccs之经典布局(二)(两栏,三栏布局) 七.等分布局 等分布局是指一行被分为若干列,每一列的宽度是相同的值.两列之间有若干的距离. 1.float+padding+background-cli ...

  4. CSS布局之-水平垂直居中

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...

  5. 解读 CSS 布局之水平垂直居中

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...

  6. 【html】【10】div布局[div水平垂直居中]

    必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0.可以按照需要设置 ...

  7. CSS Transform让百分比宽高布局元素水平垂直居中

    很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;m ...

  8. 谈谈flex布局实现水平垂直居中

    我们在这要谈的是用flex布局来实现水平和垂直居中.随着移动互联网的发展,对于网页布局来说要求越来越高,而传统的布局方案对于实现特殊布局非常不方便,比如垂直居中.所以09年,W3C 提出了一种新的方案 ...

  9. CSS3中flexbox如何实现水平垂直居中和三列等高布局

    最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.

随机推荐

  1. vue——父组件向子组件传递数据

    看例子: //注册一个全局组件,组件标签名为child Vue.component('child', { props: ['msg'], //接收父组件传递的数据 template: '<h3& ...

  2. RNN 与 LSTM 的原理详解

    原文地址:https://blog.csdn.net/happyrocking/article/details/83657993 RNN(Recurrent Neural Network)是一类用于处 ...

  3. xaml 中 引用嵌套类的对象

    public class MotorType1 { public class MotorType2 { public class MotorType3 { /// <summary> // ...

  4. django中使用mysql数据库

    django连接mysql 安装MySQL 1 linux: apt install mysql-server apt install mysql-client mysql_secure_instal ...

  5. java程序加到系统托盘的方法

    package swingtest; import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; impor ...

  6. Unity3D入门 UnityAPI常用方法和类

    时间函数: 这里只列举了一部分,更多的看Scripting API using System.Collections; using System.Collections.Generic; using ...

  7. Android开发 互相调用模式之提供扩展类

    此种方法适用于:比如你要让Android做一些事情,这些事用不到任何资源,在Android下用纯代码就能实现它,这样就可以在Android下写好,将它封装成一个方法,打成包按照下面的方式丢给Unity ...

  8. v8 google 下载及编译

    ubuntu环境下进行 参考文档: http://code.google.com/p/v8/wiki/BuildingWithGYP (一) 源码下载及编译 1, Google v8 官网:http: ...

  9. word2010目录和正文分开编页码

    最近公司要写文档,老板给了一个范文模板,其中目录和正文的页码就是分开编辑的.上网查了很多资料,基本上都没有附图,通过自己的摸索以后终于实现了.现在我就把实现过程跟截图一并奉上.

  10. 6.maven的安装

    JAVA配置 JAVA_HOME=安装目录 PATH=%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin CLASSPATH=%JAVA_HOME%\lib\dt.jar;%JAV ...