水平居中

行内元素

行内元素：（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. Android四大组件之Intent
			
    Intent不是android几大组件框架,但是确实是android 各大组件之间沟通的桥梁. 尤其Intent对于activity有很大的关系. 一下是我个人对task以及backstack的总结.
    
			
    2. 
						
  2. Android四大组件之Service(续2)
			
    1.HttpRequest package com.joyfulmath.android4example.http; import java.io.BufferedReader; import jav ...
    
			
    3. 
						
  3. JAVA里面"=="和euqals的区别
			
    (1)基本数据类型,用双等号“==”比较,比较的是他们的值,值类型是存储在内存中的栈中 (2)复合数据类型中, 当他们用“==”进行比较的时候,比较的是他们在内存中的存放地址,其变量在栈中仅仅是存储引 ...
    
			
    4. 
						
  4. [BZOJ4653][NOI2016]区间 贪心+线段树
			
    4653: [Noi2016]区间 Time Limit: 60 Sec  Memory Limit: 256 MB Description 在数轴上有 n个闭区间 [l1,r1],[l2,r2],. ...
    
			
    5. 
						
  5. 【题解】JSOI2011分特产
			
    没sa可suo的,sui题一道…… #include <bits/stdc++.h> using namespace std; #define maxn 3000 #define mod  ...
    
			
    6. 
						
  6. 洛谷  P1514 引水入城 解题报告
			
    P1514 引水入城 题目描述 在一个遥远的国度,一侧是风景秀美的湖泊,另一侧则是漫无边际的沙漠.该国的行政区划十分特殊,刚好构成一个 NN 行 \times M×M 列的矩形,如上图所示,其中每个格 ...
    
			
    7. 
						
  7. Linux内核分析第四周学习总结——系统调用的工作机制
			
    Linux内核分析第四周学习总结--系统调用的工作机制 内核态 执行级别高,可以执行特权指令,访问任意物理地址,在intel X86 CPU的权限分级为0级. 用户态 执行级别低,只能访问0x0000 ...
    
			
    8. 
						
  8. Zookeeper（四）Hadoop HA高可用集群搭建
			
    一.高可就集群搭建 1.集群规划 2.集群服务器准备 (1) 修改主机名(2) 修改 IP 地址(3) 添加主机名和 IP 映射(4) 同步服务器时间(5) 关闭防火墙(6) 配置免密登录(7) 安装 ...
    
			
    9. 
						
  9. 《剑指offer》— JavaScript（5）用两个栈实现队列
			
    用两个栈实现队列 题目描述 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 实现代码 function Stack(){ var item = []; this. ...
    
			
    10. 
						
  10. SpringMVC 之 表单标签
			
    本篇我们来学习Spring MVC表单标签的使用,借助于Spring MVC提供的表单标签可以让我们在视图上展示WebModel中的数据更加轻松. 一.首先我们先做一个简单了例子来对Spring MV ...
    
			
    11.