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. linux下如何使make只输出执行过程中的命令序列
			
    答: make -n (-n.--just-print.--dry-run.--recon等价)
    
			
    2. 
						
  2. Git  rebase使用
			
    目录 rebase的优点和缺点 分支内合并多个commit为一个新commit使用: 命令: 使用: 将其他分支合并到主分支,表现为线性: 将其他分支多个commit合并到主分支,并形成一个新comm ...
    
			
    3. 
						
  3. dll注入到指定进程
			
    talk is cheap,show me code 代码有详细注释 主程序 #include "stdafx.h" #include <windows.h> #inc ...
    
			
    4. 
						
  4. 【无法使用yum安装软件】使用yum命令安装软件提示No package numactl.x86_64 available.
			
    在安装mysql时需要安装numactl.x86_64 使用yum -y install numactl.x86_64时报错 [root@sdp6 mysql]# yum -y install num ...
    
			
    5. 
						
  5. 简单的栈溢出demo
			
    Code package startnow; /** * @auther draymonder */ public class StackOverFlowTest { public static vo ...
    
			
    6. 
						
  6. ZooKeeper分布式过程协同技术详解1——ZooKeeper的概念和基础
			
    简介 分布式系统和应用,不仅能提供更强的计算能力,还能为我们提供更好的容灾性和扩展性. ZooKeeper是Google的Chubby项目的开源实现,它曾经作为Hadoop的子项目,在大数据领域得到广 ...
    
			
    7. 
						
  7. Linux命令1——a
			
    addUser: -c:备注 -d:登陆目录 -e:有效期限 -f:缓冲天数 -g:组 -b:用户目录 -G:附加组 -s:制定使用默认的shell -u:指定用户ID -r:建立系统账号 -M:不自 ...
    
			
    8. 
						
  8. Hyper-v虚拟机
			
    Hyper-V1:创建和管理虚拟机 Hyper-V2:向VM增加虚拟硬盘 Hyper-V3:虚拟机的配置 使用Hyper-V创建虚拟机 Hyper-v 安装CentOS 7 (其他虚拟机一样参考)
    
			
    9. 
						
  9. git服务器搭建全程
			
    为了后续安装能正常进行,我们先来安装一些相关依赖库和编译工具 [root@VM_95_113_centos ~]# yum install curl-devel expat-devel gettext ...
    
			
    10. 
						
  10. vue--存储
			
    storage 一个存储库,它支持具有相同 api 的 sessionStorage 和 localStorage 安装和用法: storage 的 API: set(key,val) 用key和va ...
    
			
    11.