水平垂直居中

最新推荐文章于 2022-06-01 00:00:36 发布
最新推荐文章于 2022-06-01 00:00:36 发布
阅读量355 收藏
点赞数
分类专栏： CSS 文章标签： CSS 水平垂直居中 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37288477/article/details/86514584
版权

CSS居中对齐

垂直居中

方法一：

这种方法用来实现单行垂直居中是相当的简单的，你只要保证元素内容是单行，并且其高度是固定不变的，你只要将其“line-height”设置成和“height”值一样就Ok了。不过这种方法局限性太大，只有单行文本的元素才适用，所以在多行元素中是不能使用这种方法的。

 <!DOCTYPE html>
<!--
	作者：630280136@qq.com
	时间：2018-11-14
	描述：heiht与line-height的值一样
-->
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
	   div{
	   	height: 100px;
	   	width: 100px;
	   	border: 1px solid red;
	   }
	   span{
	   	line-height: 100px;
	   };
	</style>
	<body>
		<div>
			<span>wqeqw</span>
		</div>
		
	</body>
</html>

1

优点：

适合在所有浏览器，没有足够空间时，内容不会被切掉

缺点：

仅适合应用在文本上，并且这种方法，当你文本不是单行时，效果极差，差到让你感到恶心。
这种方法对运用在小元素上是非常有用的，比如说让一个button、图片或者单行文本字段。

方法二 表格盒类型

在表格的单元格(td)中，用vertical-align属性就能让内容垂直居中，现在用这种方法把普通元素调整为表格元素，模拟出表格的效果

缺点

虽然模拟表格能带来很多便捷，但同时也受到了限制。列如调整过的元素不能用定位和浮动；
使用盒类型table-cell的时候，必须同时有个祖先元素的盒类型是table；变成表格的元素，他的默认宽度将不再占一行，因为表格的本质上时行内元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box1{
         display: table-cell;
         vertical-align: middle;
         text-align: center; 
        width: 100px;
        height: 100px;
        background: #FF0000;       
    }
		</style>
	</head>
	<body>
		<div class="box box1">
        <span>垂直居中</span>
</div>
	</body>
</html>

2

方法三 容器的上下内边距padding相同

position 元素已知宽度
父元素设置为：position: relative;
子元素设置为：position: absolute;
距上50%，据左50%，然后减去元素自身宽度的距离就可以实现

<div class="box">
        <div class="center">我要居中</div>
    </div>


    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        .center {
            line-height: 100px;
            background: red;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -50px 0 0 -50px;
        }
        
        .box {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background: gray;
            position: relative;
        }
    </style>
方案四：position transform 元素未知宽度
优点

父元素的高度和宽度可以任意改变，不影响子元素垂直居中

<!DOCTYPE html>
<!--
	作者：630280136@qq.com
	时间：2018-11-16
	描述：绝对定位+父元素position非static+子元素transform
	这个和第三种方法很相似。
-->
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <style>
        .outside {
            width:300px;
            height: 300px;
            margin:100px auto;
            background-color: red;
            position: relative;              // 父元素非static
        }
        .inner {
            width:500px;
            height: 30px;
            background-color: yellow;
            position: absolute;
            top:50%;
            transform: translateY(-50%);    // 相对于自身高度，向上移动50%
        }
    </style>
</head>
<body >
 <div class="outside">     
     <div class="inner">
         inner
     </div>
 </div>
</body>
</html>

3

方案五：flex布局

在伸缩容器中，子元素垂直居中，相当于侧轴的居中对齐

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			border: 1px solid red;
			display: flex;
			align-items: center;
		}
		.box1{
			width: 50px;
			height: 50px;
			background: #0000FF;
		}
	</style>
	<body>
		
		<div class="box">
			<div class="box1"></div>
		</div>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS垂直居中</title>
    <style>
       .out{
       	width: 400px;
       	height: 400px;
       	background: gray;
       	display: flex;
       	flex-direction: row;
       }
       .in{
       	background: blue;
       	width: 100px;
       	height: 100px;
        align-self: center;
        text-align: center;
    
       }
    </style>
</head>
<body>
<div class="out">
    <div class="in"></div>
</div>
</body>
</html>

在这里插入图片描述

方案六：定位(高度已知)

原理和方案四是一样的，都是父元素开启相对定位，子元素开启绝对定位。移动50%，然后在向上移动自身高度的50%。这里的50%是确切的值 -25px就是确切的 ，不能使用百分数表示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			border: 1px solid red;
			position: relative;
		}
		.box1{
			width: 50px;
			height: 50px;
			background: #0000FF;
			position: absolute;
			top: 50%;
			margin-top: -25px;
		}
	</style>
	<body>
		
		<div class="box">
			<div class="box1"></div>
		</div>
	</body>
</html>

在这里插入图片描述

方案七：父元素设置行高line-hight 子元素为内联或者内联块级元素

作用环境：父元素设置line-height。
作用对象：子元素中的inline-block和inline元素。

<!DOCTYPE html>
<!-- 
作用环境：父元素设置line-height。
作用对象：子元素中的inline-block和inline元素。
-->
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.box1{
			width: 1000px;
			line-height: 100px;
			border: 1px solid red;
		}
		.box2{
			height: 100px;
		
			display: inline-block;
		}
	</style>
	<body>
		
		<div class="box1">
			<div class="box2">
				我是带着JS走南闯北
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

方案八：通过verticle-align:middle实现CSS垂直居中。

通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：inline-block。
我可以在class="wrapper"的div里面加一个div空标签，把它的高度设为100%，宽度设置为0，再给它一个vertical-align:middle样式，同样的给class="box"的div一个vertical-align:middle样式，那么box就可以在div里面垂直居中了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS垂直居中</title>
    <style>
        .wrapper{
            width: 500px;
            height: 500px;
            background-color: red;
            
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: deepskyblue;
            display: inline-block;
            vertical-align: middle;
            margin: 0 auto;
        }
        .help{
        width: 0;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="box"></div>
    <div class="help"></div>
</div>
</body>
</html>

在这里插入图片描述

水平居中

在这里插入图片描述

方法一 margin:0 auto;text-align:center 实现CSS水平居中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS垂直居中</title>
    <style>
       .out{
       	width: 400px;
       	height: 400px;
       	background: gray;
       }
       .in{
       	background: blue;
       	width: 100px;
       	height: 100px;
       	margin: 0 auto;
       	text-align: center;
       }
    </style>
</head>
<body>
<div class="out">
    <div class="in">温清夜</div>
</div>
</body>
</html>
方法二 flex布局

使用flex实现水平居中的方法越来越多。
实现原理:父元素display:flex;flex-direction:column,而子元素align-self:center
这个和实现CSS垂直居中一样，只不过一个是row一个是column

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS垂直居中</title>
    <style>
       .out{
       	width: 400px;
       	height: 400px;
       	background: gray;
       	display: flex;
       	flex-direction: column;
       }
       .in{
       	background: blue;
       	width: 100px;
       	height: 100px;
        align-self: center;
        text-align: center;
    
       }
    </style>
</head>
<body>
<div class="out">
    <div class="in">温清夜</div>
</div>
</body>
</html>
方法三margin-left

对于父元素和子元素的宽度都确定的情况，通过适合这个方法来实现水平居中，使用时，子元素给剩余宽度一半margin-left（父的宽度减去子的宽度/2）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS垂直居中</title>
    <style>
       .out{
       	width: 400px;
       	height: 400px; 
       	background: gray;
       
       }
       .in{
       	background: blue;
       	width: 100px;
       	height: 100px;
       margin-left: 150px;
       }
    </style>
</head>
<body>
<div class="out">
    <div class="in">温清夜</div>
</div>
</body>
</html>
方法四 position:absolute
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS垂直居中</title>
    <style>
       .out{
       	width: 400px;
       	height: 400px; 
       	background: gray;
        position: relative;
       }
       .in{
       	background: blue;
       	width: 100px;
       	height: 100px;
         position: absolute;
         left: 150px;
         text-align:center;
       }
    </style>
</head>
<body>
<div class="out">
    <div class="in">温清夜</div>
</div>
</body>
</html>
方法五 position transform

如果元素未知宽度,利用transform在X中移动自身的50%距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS垂直居中</title>
    <style>
       .out{
       	width: 400px;
       	height: 400px; 
       	background: gray;
       position: relative;
       }
       .in{
       	background: blue;
        width: 100px;
       	height: 100px;
       	text-align: center;
       	position: absolute;
        left: 50%;
        transform: translateX(-50%);
       }
    </style>
</head>
<body>
<div class="out">
    <div class="in">温清夜</div>
</div>
</body>
</html>

水平垂直居中

在这里插入图片描述

方法一 position:absolute

这个最适合已知父子元素的宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS垂直居中</title>
    <style>
       .out{
       	width: 400px;
       	height: 400px; 
       	background: gray;
       position: relative;
       }
       .in{
       	background: blue;
        width: 100px;
       	height: 100px;
       	text-align: center;
       	position: absolute;
        left: 150px;
        top: 150px;
        
       }
    </style>
</head>
<body>
<div class="out">
    <div class="in">温清夜</div>
</div>
</body>
</html>
方法三 postion transform
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS垂直居中</title>
    <style>
       .out{
       	width: 400px;
       	height: 400px; 
       	background: gray;
       position: relative;
       }
       .in{
       	background: blue;
        width: 100px;
       	height: 100px;
       	text-align: center;
       	position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        
       }
    </style>
</head>
<body>
<div class="out">
    <div class="in">温清夜</div>
</div>
</body>
</html>
方法三 flex布局
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS垂直居中</title>
    <style>
       .out{
       	width: 400px;
       	height: 400px; 
       	background: gray;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        -webkit-align-items:center ; 
        justify-content: center;
        align-items:center ; 
        }
       .in{
       	background: blue;
        width: 100px;
       	height: 100px;
       	text-align: center;
       }
    </style>
</head>
<body>
<div class="out">
    <div class="in">温清夜</div>
</div>
</body>
</html>
方法四 margin:auto
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS垂直居中</title>
    <style>
       .out{
       	width: 400px;
       	height: 400px; 
       	background: gray;
         position: relative;
        }
       .in{
       	background: blue;
        width: 100px;
       	height: 100px;
       	text-align: center;
       	position: absolute;
       	margin:auto; 
       	left: 0;
       	top: 0;
       	bottom: 0;
       	right: 0;
       	
       }
    </style>
</head>
<body>
<div class="out">
    <div class="in">温清夜</div>
</div>
</body>
</html>
方法五 table-cell 子元素不能是块级元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS垂直居中</title>
    <style>
       .out{
       	width: 400px;
       	height: 400px; 
       	background: gray;
        display: table-cell;
       vertical-align: middle;
       text-align: center;
        
        }
       .in{
       	background: blue;
        width: 100px;
       	height: 100px;
        display: inline-block;
          }
    </style>
</head>
<body>
<div class="out">
    <div class="in">温清夜</div>
</div>
</body>
</html>
温清夜
关注
专栏目录
div框水平垂直居中跟内容垂直居中.html
03-31
div框水平垂直居中跟内容垂直居中
bootstrap 模态框（modal）实现水平垂直居中显示
08-31
然而，默认情况下，模态框在页面上的位置并不是水平垂直居中的，而是固定在距离顶部30px的位置，并且左右居中。对于一些特定的设计需求，这可能并不满足。 为了实现Bootstrap模态框的水平垂直居中显示，我们可以...
垂直水平居中
qq_40052011的博客
11-24 664
一.单行文本水平居中：text-align：center; 单行文本垂直居中: line-height:元素高度; 二.元素水平居中 1.text-align + vertical-align（水平+垂直对齐） 在父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为inline-block元素 [注意]若兼容IE7-浏览器，将结构改...
垂直水平居中的方式
xuxu_qkz的博客
10-25 234
垂直水平居中的方式列举出了四种方式： pos
垂直水平居中的几种方式
Azyyan的博客
02-23 5411
文本水平垂直居中的几种方式
实现垂直/水平居中 （4种）
不想写博客
09-08 513
实现垂直/水平居中 （4种）
CSS 实现盒子水平居中、垂直居中和水平垂直居中….docx
11-24
CSS 盒子水平居中、垂直居中和水平垂直居中的实现方法 在 CSS 中，实现盒子水平居中、垂直居中和水平垂直居中是非常常见的需求。本文将介绍五种不同的方法来实现这些效果，并对每种方法的优缺点进行分析。 一、...
CSS解决页面图片水平垂直居中问题的方法
01-19
有时需要产品图片水平垂直居中显示，这种展示用CSS来实现又是比较棘手的一件事，我想很多前端攻程师都有研究过或者说是搜索过这些方法吧。很多网站都是使用table来实现产品图片垂直居中，实现也是相当的方便，唯一...
DIV以及图片水平垂直居中兼容多种浏览器
09-22
在网页设计中，让元素（如DIV或图片）在页面上水平垂直居中是一项常见的需求。这有助于确保用户无论在何种设备或浏览器上查看页面，都能获得一致的视觉体验。以下将详细介绍两种纯CSS方法以及一种JavaScript辅助的...
元素水平垂直居中的几种方法
赵佳敏的博客
11-08 2575
目录 一、水平居中 1.行内元素水平居中 （1）父元素是块级元素 （2）父元素不是块级元素 2.块级元素水平居中 （1）已知块级元素的宽度和高度 （2）未知块级元素的宽度和高度 （3）使用定位属性（父相子绝） （4）使用flexbox布局实现（宽度确不确定都可以） 二、垂直居中 1.单行的行内元素垂直居中 2.多行的行内元素垂直居中 3.块级元素垂直居中 (1)使用定位属性（父相子绝） (2)使用flexbox布局实现（宽度确不确定都可以） 三、块级元素水平+垂直居中 1.
史上最全概括，十种方法实现水平垂直居中~来自万物之恋
weixin_47340917的博客
10-28 2293
十种实现水平垂直居中的方法，有用的话就点赞收藏吧！ 十种方法实现水平垂直居中1. 绝对定位配合外边距2. 绝对定位配合外边距二3. 绝对定位配合偏移4. 弹性布局5. 网格布局6. 使用类似表格的布局特性7. 外边距左右自适应配合弹性盒子8. 使用display：box 并设置相应属性9. 使用内边距撑开容器10. 文字居中与同等行高 首先设置好需要用到的标签： <style> *{ margin: 0; padding: 0;
元素水平垂直居中的六种方法
whtis666的博客
06-01 7360
元素的水平垂直布局方法
前端 水平垂直居中的方法
weixin_46729085的博客
09-16 3030
第一中：writing-mode 可以参考：https://www.runoob.com/cssref/css-pr-writing-mode.html 这种方法稍微有些复杂，writing-mode可以改变文字的显示方向 第二种：table 形式 通过table单元格的形式设 优点：tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了 缺点：这个不是table的正确方法，不是很建议使用，但是也是可以实现的 第三种：table-cell实现水平垂直居中: tab...
元素水平垂直居中的方法
JJ_Smilewang的博客
04-21 4804
我们在制作页面的时候，经常需要把元素进行水平垂直居中，所以今天主要介绍行内元素和块级元素水平垂直居中的多种方法，供大家选择运用。 1.行内元素水平垂直居中的方法 1.1 水平居中 text-align:center; /* 实现行内元素水平居中 */ 1.2 垂直居中 1.2.1单行文本的垂直居中 只需要让元素高度和行高相等即可； <style> div { height: 50px; width: 300px;
弹出层详解
白天不懂夜的黑
01-14 3805
我看面经的时候，第一次遇到弹出层这个词，以前从来没有遇见过，上网看了看，没有一个是能说明白的，后来特意去看了很多的视频，下面就给大家详细解说下弹出层这个概念 弹出层和弹窗 我当初以为弹窗和弹出层是一个东西，后来也问了很多人，在广义上，他们确实相同。为啥这样说呢？ 因为二者都是点击一个按钮然后出来一个创建(多用于登录界面). 但是详细的来分，二者是有区别的！弹窗一般弹出来的窗口都是垂直居中于页面的，...
透明度问题
白天不懂夜的黑
01-17 531
实现透明的三种方法 1 CSS3的opacity(不透明)取值是在0-1(表示完全透明，1表示完全不透明) 2 rgba(red,green,blue,alpha)alpha的取值0-1 3 IE专属滤镜filter:Alpha(opacity=x)x的取值从0到100，例如:filter:Alpha(opacity=80) opacity 兼容性:IE6,7,8不支持 设置opacity元素的所...
BFC详解
白天不懂夜的黑
02-10 393
BFC的基本概念 块级格式化上下文 BFC布局规则=&gt;BFC的原理（渲染原理） 1.内部的Box会在垂直方向上一个接一个放置 2.Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻的Box的margin会发生重叠。 3.每个元素的margin box的左边，与包含块border box的左边相接触 4.BFC的区域不会与float box重叠 5.BFC是页面上的一个隔离...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值