水平居中

行内元素

行内元素：（img、span、文字等行内元素），通过在父级元素设置 text-align:center 使元素水平居中。

块级元素

块级元素：（div、p、h1...h6、ul、li等块级元素），通过在要居中元素设置 margin:0 auto(上、右、下、左)，这里表示上下0 左右自适应，达到元素水平居中。

垂直居中

行内元素

行内元素：（img、span、文字等行内元素），通过在父级元素设置display: table-cell;vertical-align: middle; 使元素垂直居中，如果是单行文字或者其他 可以设置line-height:容器高；

块级元素

高度固定通常是使用

  • 绝对定位与负边距
  • 绝对定位与margin
  • display table-cell

高度不固定

  • display table-cell
  • translate
  • flex 布局

还是上代码比较实在

行内元素水平、垂直居中

文字、图片水平、垂直居中

主要是利用

  1. text-align: center; //水平对齐方式
  2. display: table-cell;//以td形式渲染
  3. vertical-align: middle;//垂直对齐方式
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<style>

    * {

        padding: 0;

        margin: 10px 0 0 0;

    }

    div {

        width: 200px;

        height: 200px;

        border: solid 1px red;

    }

    img {

        width: 100px;

        height: 100px;

        border: 0px;

    }

    span {

        border: solid 1px blue

    }

    .div1 {

        text-align: center;

        display: table-cell;

        vertical-align: middle;

    }

    .div2 {

        line-height: 200px;

        text-align: center;

        margin: 0 auto;

    }

</style>

<body>

<p>文字</p>

<div class="div1" title="行内元素水平垂直居中">

    文字水平垂直居中1

</div>

<p>文字</p>

<div class="div2" title="行内元素水平垂直居中">

    文字水平垂直居中2

</div>

<p>图片水平垂直居中</p>

<div class="div1" title="行内元素水平垂直居中">

    <img src="data:images/pro_1.jpg">

</div>

<p>span水平垂直居中</p>

<div class="div1" title="行内元素水平垂直居中">

    <span>this is span</span>

</div>

</body>

</html>

块级元素水平、垂直居中

固定高度水平、垂直居中

固定高度水平垂直居中一般思路：

绝对定位与负边距

脱离文档流之后，在通过设置负的边距来达到水平、垂直居中效果；

  <style>

        * {

            padding: 0;

            margin: 0 0 0 0;

            box-sizing: border-box;

        }

        p{margin:20px 0 0 20px;}

        /*绝对定位与负边距实现*/

        .divBox {

            height: 200px;

            border: solid 1px red;

            position: relative;

        }

        .divContentBox{

            width: 100px;

            height: 100px;

            border: solid 1px blue;

            text-align: center;

            position: absolute;

            top: 50%;

            left: 50%;

            margin-top: -50px;

            margin-left: -50px;

        }

    </style>

<p>绝对定位与负边距实现</p>

<div class="divBox">

    <div class="divContentBox">固定宽度、高度水平垂直居中</div>

</div>

如果不能脱离文档流就增加一个空的容器

<style>

  /*增加空容器与margin */

        #divBox{

            width: 200px;

            height: 200px;

            border: solid 1px red;

        }

       #nullBox{

           width: 100%;

           height: 50%;

           background-color: blue;

         }

        #divContentBox {

            width: 100px;

            height: 100px;

                margin: -50px auto;

            border: solid 1px red;

        }

</style>

<p>增加一个空的容器</p>

<div id="divBox">

    <div id="nullBox"></div>

    <div id="divContentBox">固定宽度、高度水平垂直居中</div>

</div>

利用绝对定位与margin

<style>

#div1Box{

           /*width: 200px;*/

           height: 200px;

           border: solid 1px red;

           position: relative;

       }

        #ContentBox{

            height: 100px;

           display: inline;

            border: solid 1px blue;

            position: absolute;

            margin: auto;

            left: 0;

            right: 0;

            top: 0;

            bottom: 0;

        }

</style>

<p>绝对定位与margin</p>

<div id="div1Box">

    <div id="ContentBox">固定高度水平垂直居中</div>

</div>

css3 transform

<style>

 #container{

            height: 300px;

            position:relative;

            border: solid 1px red;

        }

        #center{

            position: absolute;

            width:100px;

            height:100px;

            border: solid 1px red;

            top: 50%;

            left: 50%;

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

        }

</style>

<p>css3 transform</p>

<div id="container">

    <div id="center">固定高度水平垂直居中</div>

</div>

display table-cell

<style>

#container1{

            width: 600px;

            text-align: center;

            vertical-align: middle;

            border: solid 1px red;

            display: table-cell;

            height: 300px;

        }

        #center2{

            width: 100px;

            height: 100px;

            border: solid 1px red;

            display: inline-block;

        }

    </style>

<p>display table-cell</p>

<div id="container1">

    <div id="center2">>固定高度水平垂直居中</div>

</div>

高度不固定水平、垂直居中

display:table-cell

  • 父元素设置 display: table-cell;

  • text-align: center;

  • vertical-align: middle; 可以达到垂直居中；

  • 子元素设置margin: 0 auto;可以达到水平居中；

translate

  • 子元素脱离稳档流

  • top、left 偏移 50%

  • transform: translate(-50%, -50%);返回自身负的50%

flex布局

  • 子元素设置水平、垂直对齐方式justify-content: center;align-items: center;

完整代码：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        /*-- display table-cell */

        #root {

            width: 100%;

            display: table;

        }

        .bigBox {

            width: 100%;

            height: 200px;

            border: solid 1px red;

            display: table-cell;

            text-align: center;

            vertical-align: middle;

        }

        .content {

            width: 300px;

            background-color: green;

            margin: 0 auto;

        }

        /*translate */

        .parent {

            width: 100%;

            height: 200px;

            border: 1px solid red;

            position: relative;

        }

        .child {

            position: absolute;

            top: 50%;

            left: 50%;

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

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

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

            background: #22B14C;

        }

        /*flex*/

        .parent1 {

            width: 100%;

            height: 200px;

            border: solid 1px red;

            display: flex;

            justify-content: center;

            align-items: center;

        }

        .child1 {

            background: green;

        }

    </style>

</head>

<body>

<div id="root">

    <div class="bigBox">

        <div class="content">

            <span>this is span</span><br/>

            <p>这是一个新的开始</p>

            <div>

                <ul>

                    <li>1</li>

                    <li>2</li>

                    <li>3</li>

                    <li>4</li>

                </ul>

            </div>

        </div>

    </div>

</div>

<div class="parent">

    <div class="child">

        <p>this is demo2</p>

        <li>a</li>

        <li>b</li>

        <li>c</li>

        <li>d</li>

    </div>

</div>

<div class="parent1">

    <div class="child1">

        <p>this is demo3</p>

        <p>this is demo3</p>

        <p>this is demo3</p>

        <li>a</li>

        <li>b</li>

        <li>c</li>

        <li>d</li>

    </div>

</div>

</body>

</html>
												


											
css 水平、垂直居中的更多相关文章
	

    
						
  1. CSS水平垂直居中总结
		
    行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...
    
		
    2. 
						
  2. css水平垂直居中对齐方式
		
    1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...
    
		
    3. 
						
  3. 把简单做好也不简单-css水平垂直居中
		
    44年前我们把人送上月球,但在CSS中我们仍然不能很好实现水平垂直居中. 作者:Icarus 原文链接:http://xdlrt.github.io/2016/12/15/2016-12-15 水平垂 ...
    
		
    4. 
						
  4. CSS水平垂直居中的方法
		
    原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...
    
		
    5. 
						
  5. css 水平垂直居中总结
		
    空闲总结了下水平垂直居中方案,欢迎补充: 水平居中 水平居中有两种情况: 子元素是内联元素 这种那个情况下只需要在父元素定义: text-align:center; 例子: html: //省略了bo ...
    
		
    6. 
						
  6. CSS水平垂直居中的几种方法2
		
    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
    
		
    7. 
						
  7. CSS水平垂直居中的几种方法
		
    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
    
		
    8. 
						
  8. 常见的几种 CSS 水平垂直居中解决办法
		
    用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...
    
		
    9. 
						
  9. 介绍一种css水平垂直居中的方法（非常好用！）
		
    这次介绍一下一个水平垂直居中的css方法,这个方法可以说是百试百灵,废话不多说,直接附上代码: html,body{ width:100%; height:100%; } 你需要居中的元素{ posi ...
    
		
    10. 
						
  10. css水平垂直居中
		
    margin法(水平居中) 需要满足三个条件: 元素定宽 元素为块级元素或行内元素设置display:block 元素的margin-left和margin-right都必须设置为auto 三个条件缺 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. 【Mybatis】Mybatis的sql模糊查询
			
    这个网站中有很多方法.https://code.google.com/p/mybatis/issues/detail?id=85 自己试验了如下的方法. 1.  参数中直接加入%% param.set ...
    
			
    2. 
						
  2. 【BZOJ1088】扫雷（递推）
			
    [BZOJ1088]扫雷(递推) 题面 BZOJ 题解 忽然发现这就是一道逗逼题. 只需要枚举一下第一个是什么,后面都能够推出来了.. #include<iostream> using n ...
    
			
    3. 
						
  3. redis的sort排序
			
    Redis排序命令是sort,完整的命令格式如下:SORT key [BY pattern] [LIMIT start count] [GET pattern] [ASC|DESC] [ALPHA]  ...
    
			
    4. 
						
  4. linux top命令查看系统资源
			
    参考材料: http://www.cnblogs.com/xd502djj/archive/2011/03/01/1968041.html
    
			
    5. 
						
  5. C++11——引入的新关键字
			
    1.auto auto是旧关键字,在C++11之前,auto用来声明自动变量,表明变量存储在栈,很少使用.在C++11中被赋予了新的含义和作用,用于类型推断. auto关键字主要有两种用途:一是在变量 ...
    
			
    6. 
						
  6. bzoj3192: [JLOI2013]删除物品（树状数组）
			
    既然要从一个堆的堆顶按顺序拿出来放到第二个堆的堆顶,那么我们就可以把两个堆顶怼在一起,这样从一个堆拿到另一个堆只需要移动指针就好了. 换句话说,把1~n倒着,n+1到n+m正着,用一个指针把两个序列分 ...
    
			
    7. 
						
  7. 框架----Django之Form提交验证（一）
			
    一.Form提交验证与Ajax提交验证的运用实例 Form表单提交时会刷新页面,输入失败时,输入框内内容也会随之刷新不能保留:而Ajax提交是在后台偷偷提交,不会刷新页面,因此也就可以保留页面输入框内 ...
    
			
    8. 
						
  8. Hibernate持久化对象修改id重新保存的办法
			
    Hibernate持久化对象修改id重新保存的办法——Hibernate学习记录二 2017年11月10日 20:16:48 筱光 阅读数:1122   版权声明:本文为博主原创文章,未经博主允许不得 ...
    
			
    9. 
						
  9. maven私服Nexus3.2的使用
			
    maven搭建私服的步骤: 分三步: 第一步:下载maven的安装包,然后配置好maven的环境变量. 第二步:将maven的私服Nexus安装好,修改maven的配置文件setting.xml问,在 ...
    
			
    10. 
						
  10. golang channel状态表
			
    如果我们查看该表,可以察觉到在操作中可能产生问题的地方.这里有三个可能导致阻塞的操作,以及三 个可能导致程序恐慌的操作. 乍看之下,通道的使用上限制很多,但在检查了这个限制产生的动机并熟悉 了通道的使 ...
    
			
    11.