CSS页面布局是web前端开发的最基本的技能，本文将介绍一些常见的布局方法，涉及到盒子布局，column布局，flex布局等内容。本文中，你可以看到一些水平垂直居中的方法，左侧固定宽度，右侧自适应的一些方法。如果你有更多关于布局方面的技巧，欢迎留言交流。

一、神奇的居中

    经常看到有一些面试题问如何实现水平垂直居中，还要求用多种方法。唉唉唉！下面介绍一下我所知道的实现居中的方法。

（1）父元素relative;子元素absolute，top:50%;left:50%;margin-left:-自己宽度的一半;margin-right:-自己高度的一半。
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>水平垂直居中2</title>

     <style type="text/css">

         .container{

             width: 100%;

             height: 500px;

             background: red;

             position: relative;

         }

         .child{

             width: 300px;

             height: 300px;

             background: blue;

             position: absolute;

             left: 50%;

             margin-left: -150px;

             top: 50%;

             margin-top: -150px;

         }

     </style>

 </head>

 <body>

     <div class="container">

         <div class="child"></div>

     </div>

 </body>

 </html>

这种方法需要知道子元素的宽高。

（2）父元素：relative;子元素：absolute;top：50%;left:50%;transform:translate(-50%,-50%);
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>水平垂直居中3</title>

     <style type="text/css">

         .container{

             background: red;

             width: 100%;

             height: 500px;

             position: relative;

         }

         .child{

             background: blue;

             width: 300px;

             height: 300px;

             position: absolute;

             top: 50%;

             left: 50%;

             transform: translate(-50%,-50%);

         }

     </style>

 </head>

 <body>

     <div class="container">

         <div class="child"></div>

     </div>

 </body>

 </html>
此法跟上面的相似，但是用到了transform，好处是不需要知道子元素的宽高,兼容性方面我查了一下，看着办吧。





（3）父元素：display: flex;justify-content: center;align-items: center;
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>水平垂直居中1</title>

    <style type="text/css">

        .container{

            width: 100%;

            height: 400px;

            background: red;

            display: flex;

            justify-content: center;

            align-items: center;

        }

        .child{

            width: 300px;

            height: 300px;

            background: blue;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="child"></div>

    </div>

</body>

</html>


这种方法看起来有些高大上，根本不用理会子元素。


（4）水平居中的方法，父元素：text-align：center




 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>水平垂直居中4</title>

     <style type="text/css">

         .container{

             background: red;

             width: 100%;

             height: 500px;

             text-align: center;

         }

         .child{

             background: blue;

             width: 300px;

             height: 300px;

             margin: auto;

         }

     </style>

 </head>

 <body>

     <div class="container">

         <div class="child"></div>

     </div>

 </body>

 </html>




如果子元素里的文字不要水平居中的话，那么用此法将遇到不少麻烦。

（5）水平居中方法，子元素：margin：0 auto;这个好说，不上代码了

好了，关于居中问题就说这么多，如果你还有更好的方法，请告诉我。
二、左侧固定宽度，右侧自适应

这是一个比较常见的需求，下面介绍几种实现方法。

（1）左边定宽，左浮动，右边不指定宽。




 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>做固定，右边自适应</title>

     <style type="text/css">

     body{

         margin: 0;

     }

         .aside{

             background: red;

             width:200px;

             height: 500px;

             float: left;

         }

         .main {

             background: blue;

             height: 500px;

         }

     </style>

 </head>

 <body>

     <div class="aside">

         我是左边的

     </div>

     <div class="main">

         我是主体

         我是主体

         我是主体

         我是主体

         我是主体

     </div>

 </body>

 </html>




做实验时无意发现了这种方法，意外之喜。


（2）用padding占位子的方法




 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>左侧固定右侧自适应</title>

     <style type="text/css">

         .container {

             padding-left: 200px;

             width: 100%;

             position: relative;

         }

         .left{

             position: absolute;

             left: 0;

             right: 0;

             background: red;

             height: 500px;

             width: 200px;

         }

         .right{

             background: blue;

             width: 100%;

             height: 500px;

         }

     </style>

 </head>

 <body>

     <div class="container">

         <div class="left">zuobian</div>

         <div class="right">

             新华社俄罗斯喀山3月23日电（记者 魏良磊）中俄执政党对话机制第六次会议和第五届中俄政党论坛23日在俄罗斯喀山举行。和俄罗斯联邦总统普京分别致贺信。

         </div>

     </div>

 </body>

 </html>




注意了，absolute是脱离文档流的。.right的100%是相对于父容器的内容宽度的，不是整个宽度。


（3）父：display:flex;左定宽;右flex：1。ok




 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>左边固定，右边自适应</title>

     <style type="text/css">

         .container{

             display: flex;

         }

         .left{

             width: 200px;

             height: 500px;

             background: red;

         }

         .right{

             background: blue;

             height: 500px;

             flex: 1;

         }

     </style>

 </head>

 <body>

     <div class="container">

         <div class="left">zuobian</div>

         <div class="right">

             新华社俄罗斯喀山3月23日电（记者 魏良磊）中俄执政党对话机制第六次会议和第五届中俄政党论坛23日在俄罗斯喀山举行。和俄罗斯联邦总统普京分别致贺信。

         </div>

     </div>

 </body>

 </html>




弹性盒子很强，有木有。但是有的是要加前缀的，哪些要加自己查去，有一次做实验，电脑样式正确，手机就是不对，搞了好半天。



（4）父：display：table;左右：display：table-cell;左：定宽。




 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>左边固定，右边自适应</title>

     <style type="text/css">

         .container{

             display: table;

         }

         .left{

             width: 200px;

             height: 500px;

             background: red;

             display: table-cell;

         }

         .right{

             background: blue;

             height: 500px;

             display: table-cell;

         }

     </style>

 </head>

 <body>

     <div class="container">

         <div class="left">zuobian</div>

         <div class="right">

             新华社俄罗斯喀山3月23日电（记者 魏良磊）中俄执政党对话机制第六次会议和第五届中俄政党论坛23日在俄罗斯喀山举行。罗斯联邦总统普京分别致贺信。

         </div>

     </div>

 </body>

 </html>




据说这是一种古老的方法，我咋不知道呢？可能我比较年轻吧！



三、总结


CSS这个东西看起来挺简单的，要掌握好还真实不简单。特别佩服张鑫旭，他对CSS的研究真的非常非常深入，虽然说不太喜欢他的风格。先到这，以后在再补充下相关的内容。
												


											
CSS基础布局--居中对齐，左侧定宽右侧自适应的更多相关文章
	

    
								
  1. 请给出一个左侧定宽右侧自适应的HTML结构及样式
		
    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...
    
		
    2. 
						
  2. CSS左侧固定宽 右侧自适应（兼容所有浏览器）
		
    左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...
    
		
    3. 
						
  3. table-cell完成左侧定宽，右侧定宽及左右定宽等布局
		
    使用table-cell完成以下几种布局(ie8及以上兼容) 1.左侧定宽-右侧自适应 .left{ width: 300px; height: 500px; border: 1px solid; f ...
    
		
    4. 
						
  4. css 两列布局中单列定宽单列自适应布局的6种思路
		
    前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...
    
		
    5. 
						
  5. CSS布局 两列布局之单列定宽,单列自适应布局思路
		
    前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...
    
		
    6. 
						
  6. CSS布局 -- 左侧定宽，右侧自适应
		
    左侧定宽,右侧自适应 有很多种方法可以实现 缩小窗口试试看? 方案一: 左边左浮动,右边加个margin-left 查看 demo <!DOCTYPE html PUBLIC "-// ...
    
		
    7. 
						
  7. NEC学习 ---- 布局 -两列， 左侧定宽，右侧自适应
		
    CSS代码:以下两处代码是NEC中CSS初始化样式和功能性样式.今后的NEC研究中,默认这两处是引用的. /* 这是CSS reset 代码 --- 初始化样式 */ /* reset */ html ...
    
		
    8. 
						
  8. css高度已知，左右定宽，中间自适应三栏布局
		
    css高度已知,左右定宽,中间自适应三栏布局: <!DOCTYPE html> <html lang="en"> <head> <meta ...
    
		
    9. 
						
  9. css实现左边定宽右边自适应的5种方法总汇
		
    在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 定制 cloud-init - 每天5分钟玩转 OpenStack（155）
			
    这是 OpenStack 实施经验分享系列的第 5 篇. 对于 Linux 镜像,cloud-init 负责 instance 的初始化工作.cloud-init 功能很强大,能做很多事情,而且我们可 ...
    
			
    2. 
						
  2. angular : ngModel 内部流程
			
    angular 1.5 beta link NgModelController provides API for the ngModel directive. The controller conta ...
    
			
    3. 
						
  3. 每天一个linux命令(53)--ps命令
			
    要毁掉一天,从早上开始. Linux中的ps命令是 process status 的缩写.ps 命令用来列出系统中当前运行的那些进程.ps 命令列出的是当前那些进程的快照,就是执行ps 命令的那个时刻 ...
    
			
    4. 
						
  4. js实现二级联动下拉列表菜单
			
    二级联动下拉列表菜单的难点在于对后台返回的数据进行解析,不多逼逼,直接上代码 上图是后台返回的数据 实现代码如下: var deviceNotExist = true;//防止数据重复 if(data ...
    
			
    5. 
						
  5. AIO75产品特征与优势
			
    第一章 系统一体化 AIO7的核心流程由供应链.生产制造.财务成本及自动化办公构成,是迄今为止国内最完善的ERP.OA .HR .MES一体化产品.通过CRM(客户关系)及DRP(分销)扩充出“营销通 ...
    
			
    6. 
						
  6. 关于Storm tick
			
    关于Storm tick 1. tick的功能 Apache Storm中内置了一种定时机制——tick,它能够让任何bolt的所有task每隔一段时间(精确到秒级,用户可以自定义)收到一个来自__s ...
    
			
    7. 
						
  7. Unity Shader 知识点总结（二）
			
    紧接着上一篇文章的shader入门知识的总结,本文主要总结shader中的纹理贴图.透明度混合.顶点动画.后期特效处理等操作.如果有什么地方有错,请指出更正,谢谢.本文的代码主要来自开源书:unity ...
    
			
    8. 
						
  8. ST HW2 fault & error & failure
			
    Software Testing 3014218128 牛菲菲 Below are two faulty programs. Each includes a test case that result ...
    
			
    9. 
						
  9. 引用类型-----Object
			
    本文章转载至:https://segmentfault.com/a/1190000003984584 关于引用类型的概念: 引用类型:引用类型的值(对象)是引用类型的一个实例: 对象:是某个特定引用类 ...
    
			
    10. 
						
  10. linux系统和Windows系统共存
			
    最近接触了linux系统,因为对linux系统一直存在一种敬畏之心,所以决定研究研究 那么今天我在这里呢是要和大家分享一下在Windows存在的情况下安装双系统linux 那么第一步呢,就是斤BIOS ...
    
			
    11.