水平垂直居中的6种方法

最新推荐文章于 2023-08-22 20:00:00 发布

小黑杂谈

最新推荐文章于 2023-08-22 20:00:00 发布

阅读量183

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/a1187668175/article/details/113825702

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、不知道inner自身盒子宽高

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>水平垂直居中</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

        /* 1、不知道inner自身盒子宽高 */
		.outer {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: blue;
        }
        .inner {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            background: red;
            transform: translate(-50%, -50%);
        }
	</style>
</head>
<body>
    <!-- <div class="other">小黑杂谈</div> -->
	<div class="outer">
        <div class="inner">
        </div> 
	</div>
</body>
<script>
    let ele = document.querySelector('.inner');
    let dis = window.getComputedStyle(ele,null).display;
    console.log(dis);
</script>
</html>

2、利用margin负值（知道自身的盒子宽高 )

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>水平垂直居中</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}       
        /* 2、知道自身的盒子宽高 */
        .outer {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: blue;
        }
        .inner {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100px;
            height: 100px;
            background: red;
            margin-top: -50px;
            margin-left: -50px;
        }
	</style>
</head>
<body>
    <!-- <div class="other">小黑杂谈</div> -->
	<div class="outer">
        <div class="inner">
        </div> 
	</div>
</body>
<script>
    let ele = document.querySelector('.inner');
    let dis = window.getComputedStyle(ele,null).display;
    console.log(dis);
</script>
</html>

3、利用元素在垂直方向具有自动填充特性 margin: auto

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>水平垂直居中</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
        /* 3、利用元素在垂直方向具有自动填充特性 margin: auto */         
        .outer {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: blue;
        }     
        .inner { 
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 100px;
            height: 100px;
            margin: auto;
            background-color: red;
        }
	</style>
</head>
<body>
    <!-- <div class="other">小黑杂谈</div> -->
	<div class="outer">
        <div class="inner">
        </div> 
	</div>
</body>
<script>
    let ele = document.querySelector('.inner');
    let dis = window.getComputedStyle(ele,null).display;
    console.log(dis);
</script>
</html>

4、通过设置父元素为table-cell

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>水平垂直居中</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
        /* 4、通过设置父元素为table-cell */
        .outer {
            width: 400px;
            height: 400px;
            background-color: blue;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        .inner {
            width: 100px;
            height: 100px;
            background-color: red;
            display: inline-block;
        }
	</style>
</head>
<body>
    <!-- <div class="other">小黑杂谈</div> -->
	<div class="outer">
        <div class="inner">
        </div> 
	</div>
</body>
<script>
    let ele = document.querySelector('.inner');
    let dis = window.getComputedStyle(ele,null).display;
    console.log(dis);
</script>
</html>

5、line-height

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>水平垂直居中</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
        /* 5、line-height 具有继承性 
            父元素设置行高=盒子高度 即相当于父元素内文本 中线居中
            1)、子元素(无文本内容)设为行内块 或者是img这种本身就是行内块的 默认是底端与父元素的基线对齐
            通过 vertical-align: middle; 即可垂直居中显示
            2)、若子元素内部有文本 则默认 子元素内的行高会继承父元素的行高 
            需重新设置 line-height: 1.5 ;(浏览器默认行高)  两者文本的基线对齐 
            若是多行文本 则对齐的是对下面一行的内容 此时若想文本居中显示 仍需设置 vertical-align: middle;
        */  /* font: 16px #000; */
        /* height: 100px; 子元素高度 设置 则是使子元素盒子居中 
        不设置的话 也是盒子居中 但内容也一块居中 更符合实际情况*/        
        .outer {   
            width: 400px;
            height: 400px;
            line-height: 400px; 
            background-color: blue;
            text-align: center;           
        }
        .inner {
            width: 100px;
            height: 100px;  
            background-color: red;
            display: inline-block;
            vertical-align: middle;           
        } 

	</style>
</head>
<body>
    <!-- <div class="other">小黑杂谈</div> -->
	<div class="outer">
        <div class="inner">
        </div> 
	</div>
</body>
<script>
    let ele = document.querySelector('.inner');
    let dis = window.getComputedStyle(ele,null).display;
    console.log(dis);
</script>
</html>

6、flex布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>水平垂直居中</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}        
        /* 6、flex布局 容器的属性 */
        /* flex-flow: row nowrap;  默认就是这个可不写 */ 
        /* justify-content: center;  默认flex-start 水平方向项目对齐方式 */
        /* align-items: center;  默认flex-start 垂直方向项目对齐方式 */
        /* .inner 设置内部项目的显示方式 */
        /* flex: none; 默认是 0 1 auto   none 表示 0 0 auto flex-grow扩展 flex-shrink压缩 flex-basis项目占据空间 默认auto即本身大小*/ 
        /* 2) 或者利用弹性布局的自动填充 利用margin:auto 实现水平垂直居中*/        
        .outer {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap; 
            justify-content: center; 
            align-items: center; 
            width: 400px;
            height: 400px;
            background-color: blue;
        }     
        .inner { 
            flex: none; 
            width: 100px;
            height: 100px;
            background-color: red;        
        }
        /* margin: auto; */
	</style>
</head>
<body>
    <!-- <div class="other">小黑杂谈</div> -->
	<div class="outer">
        <div class="inner">
        </div> 
	</div>
</body>
<script>
    let ele = document.querySelector('.inner');
    let dis = window.getComputedStyle(ele,null).display;
    console.log(dis);
</script>
</html>

小黑杂谈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
水平垂直居中的6种方法

目录1、不知道inner自身盒子宽高2、利用margin负值（知道自身的盒子宽高 )3、利用元素在垂直方向具有自动填充特性 margin: auto4、通过设置父元素为table-cell5、line-height6、flex布局1、不知道inner自身盒子宽高<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>水平垂直居中</title>
复制链接

扫一扫