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. Kettle 连接 Oracle 问题总结
			
    一. Driver class 'oracle.jdbc.driver.OracleDriver' could not be found, make sure the 'Oracle' driver  ...
    
			
    2. 
						
  2. 【lg1799】数列
			
    题目描述 虽然msh长大了,但她还是很喜欢找点游戏自娱自乐.有一天,她在纸上写了一串数字:1,l,2,5,4.接着她擦掉了一个l,结果发现剩下l,2,4都在自己所在的位置上,即1在第1位,2在第2位, ...
    
			
    3. 
						
  3. Asp.Net 之 DropDownList的使用
			
    这里不细说,直接上案例 <td style="width: 30px;" align="right"> 年月: </td> <td ...
    
			
    4. 
						
  4. P5057 [CQOI2006]简单题（线段树）
			
    果然简单题,5分钟紫题++ 代码 #include <cstdio> #include <algorithm> #include <cstring> using n ...
    
			
    5. 
						
  5. P4213 【模板】杜教筛（Sum）（杜教筛）
			
    根据狄利克雷卷积的性质,可以在低于线性时间复杂度的情况下,求积性函数前缀和 公式 \[ 求\sum_{i=1}^{n}\mu(i) \] 因为\(\mu*I=\epsilon\) 所以设\(h=\mu ...
    
			
    6. 
						
  6. （转）Paper list of Meta Learning/ Learning to Learn/ One Shot Learning/ Lifelong Learning
			
    Meta Learning/ Learning to Learn/ One Shot Learning/ Lifelong Learning 2018-08-03 19:16:56 本文转自:http ...
    
			
    7. 
						
  7. Redis,Memcache比较
			
    简单比较: Redis不仅仅支持简单的k/v类型的数据,同时还提供list,set,hash等数据结构的存储.memcache只支持简单的K/V类型数据, 不过memcache可以缓存其他东西如图片, ...
    
			
    8. 
						
  8. 案例：8，64，256都是2的阶次方数（8是2的3次方），用Java编写程序来判断一个整数是不是2的阶次方数。
			
     如果一个数是2的阶次方数,则它的二进制数的首位一般是1,后面全为0.比如8:1000,64:1000000,如果将这个数减1后再作与&运算,则应该全为0,(x&(x-1)==0&am ...
    
			
    9. 
						
  9. 02：httpd-2.2基础配置
			
    ---恢复内容开始--- 9.日志设定 错误日志: ErrorLog logs/error_log //这里使用了相对路径,相对于/etc/httpd/路径 LogLevel warn  //定义日志 ...
    
			
    10. 
						
  10. [小问题笔记（九）] SQL语句Not IN 效率低，用 NOT EXISTS试试
			
    项目中遇到这么个情况: t1表 和 t2表  都是150w条数据,600M的样子,都不算大. 但是这样一句查询 ↓ select * from t1 where phone not in (selec ...
    
			
    11.