水平居中

行内元素

行内元素：（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. BZOJ 1228 E&G(sg函数+找规律)
			
    把一对石子堆看出一个子游戏.打出子游戏的sg表找规律.. 这个规律我是一定找不出来的... 对于i,j,如果 (i-1)%pow(2,k+1) < pow(2,k) (j-1)%pow(2,k+ ...
    
			
    2. 
						
  2. Day 3 学习笔记
			
    Day 3 学习笔记 STL 模板库 一.结构体 结构体是把你所需要的一些自定义的类型(原类型.实例(:包括函数)的集合)都放到一个变量包里. 然后这个变量包与原先的类型差不多,可以开数组,是一种数据 ...
    
			
    3. 
						
  3. C++解析-外传篇(1)：异常处理深度解析
			
    0.目录 1.异常的最终处理 2.结束函数terminate() 3.小结 1.异常的最终处理 问题: 如果在main函数中抛出异常会发生什么? 如果异常不处理,最后会传到哪里? 下面的代码的输出什么 ...
    
			
    4. 
						
  4. 【转】小心stringstream.str()字符串用法的陷阱
			
    --------------------- 作者:心中那自由的世界 来源:CSDN 原文:https://blog.csdn.net/119365374/article/details/7744678 ...
    
			
    5. 
						
  5. 对于最近的一些日常总结by520(17.10.18）
			
    ---天天考试,各种题型都有,学到了很多新的知识,也发现了自己的许多不足---1.首先,自己的搜索需要加强,特别是广搜,10.18的T1裸广搜没有做对.2.数学的思维和一些逻辑问题需要加强,然后就是要 ...
    
			
    6. 
						
  6. QT uic rcc moc 命令行使用
			
    QT uic rcc moc 命令行使用 PS C:\Users\lsgx> uic.exe --help Usage: C:\Qt\Qt5.5.1\5.5\msvc2012\bin\uic.e ...
    
			
    7. 
						
  7. oracle 插入单引号
			
    INSERT INTO  tb (id) values ('hellp'||''''||'张三')   --等于 hellp'张三
    
			
    8. 
						
  8. 【CF331E】Biologist（网络流，最小割）
			
    [CF331E]Biologist(网络流,最小割) 题面 洛谷 翻译: 有一个长度为\(n\)的\(01\)串,将第\(i\)个位置变为另外一个数字的代价是\(v_i\). 有\(m\)个要求 每个 ...
    
			
    9. 
						
  9. linux-----遇到的问题----tab键不补全sh文件不能运行
			
    在linux上部署tomcat,进入bin目录后 遇到了tab键不补全sh文件不能运行的情况. 如果自己输入sh文件名后也会报错: [x@web bin]$ ./startup.shbash: ./s ...
    
			
    10. 
						
  10. 如何在 ASP.NET 应用程序中实现模拟用户身份（在ASP.NET中以管理员身份运行网站）
			
    前言 在实际的项目开发中,我们可能会需要调用一些非托管程序,而有些非托管程序需要有更高的身份权限才能正确执行.本文介绍了如何让IIS承载的ASP.NET网站以特定的账户执行,比如Administrat ...
    
			
    11.