水平居中

行内元素

行内元素：（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. 最大流Dinic算法模板（pascal）
			
    program rrr(input,output); const inf=; type pointer=^nodetype; nodetype=record t,c:longint; next,rev ...
    
			
    2. 
						
  2. java实现PV操作
			
    package com.jayfulmath.designpattern.command; import java.util.concurrent.Semaphore; /* P(S): ①将信号量S ...
    
			
    3. 
						
  3. 常州day1p3
			
    给定一个 n 行 m 列的方格,每个格子里有一个正整数 a,1 ≤ a ≤ k,k ≤ n∗m 假设你当前时刻站在 (i,j) 这个格子里,你想要移动到 (x,y),那必须满足以下三个条件 1:i & ...
    
			
    4. 
						
  4. NOI2014魔法森林题解报告
			
    题目描述 为了得到书法大家的真传,小 E 同学下定决心去拜访住在魔法森林中的隐 士.魔法森林可以被看成一个包含 n 个节点 m 条边的无向图,节点标号为 1,2,3,-,n,边标号为 1,2,3,-, ...
    
			
    5. 
						
  5. oracle-DECODE()函数
			
    DECODE()函数 DECODE(value, if1, then1, if2,then2, if3,then3, . . . else ) 含义解释: DECODE(条件,值1,翻译值1,值2,翻 ...
    
			
    6. 
						
  6. poj  1273 裸 网络流 （dinic）
			
    Description Every time it rains on Farmer John's fields, a pond forms over Bessie's favorite clover  ...
    
			
    7. 
						
  7. NOIP2017
			
    NOIP2017游记 记得开始学OI是今年的6月,那时候纯粹是抱着好玩的心态来学的,但是渐渐地,我发现我好像喜欢上了OI,喜欢敲键盘时的声音,喜欢手指触碰键盘时的手感,喜欢这个奥赛班与其他科目学习气氛 ...
    
			
    8. 
						
  8. webpack中Module build failed: Unknown word (2:1)
			
    在新建的webpack.config.js文件中配置好style-loader和css-loader,注意顺序为:style-loader,css-loader,less-loader,postcss ...
    
			
    9. 
						
  9. BFC 块级元素格式化上下文
			
    Block Formatting Contexts: 块级元素格式化上下文块级元素如何对它的内容(子元素:也是一个块元素)进行布局,以及与其它元素(与内容同级别)的关系和相互作用 普通文档流的布局规则 ...
    
			
    10. 
						
  10. C语言 结构体传值与传址分析
			
    /********************************************************************** * 版权所有 (C)2017, Wang maochun ...
    
			
    11.