position 元素已知宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中</title>
    <style>
        .father{
            background-color: #FF8C00;
            width: 600px;
            height:600px;
            position: relative;
        }
        .child{
            background-color: rosybrown;
            width: 300px;
            height: 300px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -150px 0 0 -150px;
        }
    </style>
</head>
<body>
       <div class="father">
           <div class="child">
               hello word!!!
           </div>
       </div>
</body>
</html>

position 元素未知宽度



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中</title>
    <style>
        .father{
            background-color: #FF8C00;
            height: 300px;
            position: relative;
        }
        .child{
            background-color: #F00;
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%)
        }
    </style>
</head>
<body>
       <div class="father">
           <div class="child">
               hello word!!!
           </div>
       </div>
</body>
</html>




position  可以不知道宽




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <style>

        .father{

            background-color: #FF8C00;

            height: 500px;

            width: 500px;

           position: relative;

        }

        .child{

            background-color: #F00;

            width: 200px;

            height: 200px;

            position:absolute;

            left:0;

            top: 0;

            bottom: 0;

            right: 0;

            margin: auto;

        }

    </style>

</head>

<body>

       <div class="father">

           <div class="child">

               hello word!!!

           </div>

       </div>

</body>

</html>




flex可以不知道宽




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <style>

        .father{

            background-color: #FF8C00;

            height: 500px;

            width: 500px;

            display: flex;/*flex布局*/

            justify-content: center;/*使子项目水平居中*/

            align-items: center;/*使子项目垂直居中*/

        }

        .child{

            background-color: #F00;

            width: 200px;

            height: 200px;

        }

    </style>

</head>

<body>

       <div class="father">

           <div class="child">

               hello word!!!

           </div>

       </div>

</body>

</html>




table-cell布局   需要三个标签  相对麻烦     因为table-cell相当与表格的td，td为行内元素，无法设置宽和高，所以嵌套一层，嵌套一层必须设置display: inline-block;td的背景覆盖了橘黄色，不推荐使用




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <style>

        .father{

            background-color: #FF8C00;

            height: 500px;

            width: 500px;

            display: table;

        }

        .child{

            background-color: #F00;

            width: 200px;

            height: 200px;

            display: table-cell;

            vertical-align: middle;/*使子元素垂直居中*/

            text-align: center;/*使子元素水平居中*/

        }

        .childInner{

            background-color: #;

            display: inline-block;/*使子元素呈现块状*/

            width: 100px;

            height: 100px;

        }

    </style>

</head>

<body>

       <div class="father">

           <div class="child">

              <div class="childInner"> hello word!!!</div>

           </div>

       </div>

</body>

</html>


												


											
css 水平垂直居中显示（定高不定高定宽不定宽）的更多相关文章
	

    
								
  1. CSS水平垂直居中总结
		
    行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...
    
		
    2. 
						
  2. css水平垂直居中
		
    margin法(水平居中) 需要满足三个条件: 元素定宽 元素为块级元素或行内元素设置display:block 元素的margin-left和margin-right都必须设置为auto 三个条件缺 ...
    
		
    3. 
						
  3. 把简单做好也不简单-css水平垂直居中
		
    44年前我们把人送上月球,但在CSS中我们仍然不能很好实现水平垂直居中. 作者:Icarus 原文链接:http://xdlrt.github.io/2016/12/15/2016-12-15 水平垂 ...
    
		
    4. 
						
  4. css水平垂直居中对齐方式
		
    1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...
    
		
    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. HTML+CSS水平垂直居中
		
    啦啦啦,好了,今天来分享自己的第一个知识点,难得自己还能想起来过来博客园,写写博客的. 好了,言归正传,今天分享关于html和css的一个简单的知识点,对于大部分从事前端开发的人员来说可能都是很简单的 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Django框架(八) Django之ORM数据库操作
			
    创建模型 实例:我们来假定下面这些概念,字段和关系 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息.作者详情模型和作者模型之间是一对一的关系( ...
    
			
    2. 
						
  2. thinkphp在前端页面的js代码中可以使用 U方法吗? 可以使用模板变量如__URL__等吗?
			
    thinkphp在前端页面的js代码中可以使用 U方法吗? : 可以的! tp的U方法, 是"全局的", 什么是全局的? 就是, 可以在 "任何地方"使用的:  ...
    
			
    3. 
						
  3. MATLAB小波包的分解与重构
			
    该文章用来直观上先感受一下小波包的分解与重构   例1 有一个信号,变量名为wave,随便找一个信号load进来就行了. t=wpdec(wave,3,'dmey'); t2 = wpjoin(t,[ ...
    
			
    4. 
						
  4. final、finally、finalize的用法
			
    final: 1.被final修饰的类,就意味着不能再派生出新的子类,不能作为父类而被子类继承 2.将变量或方法声明为final,可以保证他们在使用的过程中不被修改. 3.被final声明的方法也同样 ...
    
			
    5. 
						
  5. ComponentOne使用技巧——从Winform穿越到WPF
			
    概述 WPF 和 Winform 是两个单独的平台,但二者又都是基于 .NET 4.0 以上版本开发的,所以很多.NET开发人员就开始研究如何在WPF中使用Winform.微软已经架设了两个开发平台的 ...
    
			
    6. 
						
  6. Ubuntu 14.04 安装 boost 1_57_0
			
    参考: How to build boost 1_57_0 Ubuntu platform Ubuntu 14.04 安装 boost 1_57_0 $ sudo mkdir /opt/downloa ...
    
			
    7. 
						
  7. layer 弹出层 回调函数调用 弹出层页面 函数
			
    1.项目中用到layer 弹出层,定义一个公用的窗口,问题来了窗口弹出来了,如何保存页面上的数据呢?疯狂百度之后,有了结果,赶紧记下. 2.自己定义的公共页面方法: layuiWindow: func ...
    
			
    8. 
						
  8. 封装fetch的使用（包含超时处理）
			
    // 1: 传统fetch操作 fetch('http://facebook.github.io/react-native/movies.json') .then((response) => r ...
    
			
    9. 
						
  9. dll多个版本问题
			
    在配置文件设置不同版本的dll即可 配置文件如下 configuration 节点下面的  runtime 节点新增各个版本配置内容 <runtime> <assemblyBindi ...
    
			
    10. 
						
  10. yum节省安装时间
			
    yum install java-1.8.0-openjdk 安装jdk yum install tomcat 安装tomcat wget http://repo.mysql.com/mysql-co ...
    
			
    11.